初识HTML(四)---CSS
代码哈士奇 119 2

CSS

简介

简单来说css就是来控制元素样式的 w3school 手册 为什么要用css呢 样式重复以及代码看着难受等问题 如下图对比 在这里插入图片描述实现此代码 一

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 100px;height: 100px;background-color: black;float:right;"></div>
        <div style="width: 100px;height: 100px;background-color: red;"></div>
        <div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
        <div style="width: 100px;height: 100px;background-color: yellow;float: right;"></div>
    </body>
</html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            .one{
                width: 100px;height: 100px;background-color: black;float:right;
            }
            .two{
                width: 100px;height: 100px;background-color: red;
            }
            .three{
                width: 100px;height: 100px;background-color: green;float: left;
            }
            .four{
                width: 100px;height: 100px;background-color: yellow;float: right;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>

当然样式代码还可以更简洁 此处对比元素内代码的多少

基础用法

通过在head标签中的style标签可以来控制样式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h1{
                color: #FF0000;
            }
            h2{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <h1>我是狗</h1>
        <h2>巧了,我也是狗</h2>
    </body>
</html>

在这里插入图片描述

高级用法---选择器

id选择器

对id标记的元素调整样式

什么是id

    <h1 id="oneH">我是狗</h1>

id="data" data就是id的值 标记此元素id值为data 简单来说就是 某个人你可以不知道它叫什么 但是他的代号是 张三 id="张三" 但是id是唯一的 一个公司中只能有一个代号张三

id选择器如何使用

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #oneH{
                color: #0000FF;
            }
        </style>
    </head>
    <body>
        <h1 id="oneH">我是狗</h1>
    </body>
</html>

在这里插入图片描述

在style标签中用#来标记 比如id="one" 就写成 #one{ ....... }

类选择器

什么是类 class 元素属性的类名 示例如下

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .oneH{
                color: #0000FF;
            }
        </style>
    </head>
    <body>
        <h1 class="oneH">我是狗</h1>
        <h2 class="oneH">我是猪</h2>
    </body>
</html>

在这里插入图片描述

在style标签中用#来标记 比如class="one" 就写成 .one{ ....... } class是公用的 多个元素可以用同一个class

属性选择器

什么是属性 name title id class等待都是元素属性 但是id class都有特定的所以除去这俩用属性选择器
[attribute]选取带有指定属性的元素
[attribute=value]选取带有指定属性和值的元素
[attribute~=value]用于选取属性值用于中包含指定字符串的元素
[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是完整字符串
[attribute^=value]用于属性值以指定值开头的每个元素
[attribute$=value]用于属性值以指定值)结尾的每个元素
[attribute*=value]用于匹配属性值中包含指定值的每个元素
用法如下

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            [name]{
                color: red;[attribute]选取带有指定属性(此处为name)的元素
            }
            [name=two]{
                color: #0000FF;[attribute=value]选取带有指定属性(此处为name)和值(此处为two)的元素
            }
            [name~=twenty]{
                color: aqua;[attribute~=value]用于选取属性值(此处为name)用于中包含指定(此处为twenty)字符串的元素
            }
            [name|=five]{
                color: blueviolet;[attribute|=value]用于选取带有以指定值(此处为five)开头的属性值(此处为name)的元素,该值必须是完整字符串            }
            [name^=he]{
                color:  chartreuse;[attribute^=value]用于属性值(此处为name)以指定值(此处为he)开头的每个元素
            }
            [name$=p]{
                color: darkgreen;[attribute$=value]用于属性值(此处为name)以指定值(此处为p)结尾的每个元素
            }
            [name*=god]{
                color: black;[attribute*=value]用于匹配属性值(此处为name)中包含指定值(此处为god)的每个元素
            }
        </style>
    </head>
    <body>
        <h1 name="one">我是狗</h1>
        <h1 name="two">我是狗</h1>
        <h1 name="twenty three">我是狗</h1>
        <h1 name="twenty four">我是狗</h1>
        <h1 name="three">我是狗</h1>
        <h1 name="five-one">我是狗</h1>
        <h1 name="five one">我是狗</h1>
        <h1 name="hello">我是狗</h1>
        <h1 name="wow p">我是狗</h1>
        <h1 name="oh god cool">我是狗</h1>
    </body>
</html>

在这里插入图片描述

引用方式

HTML内引入

写在style标签内

    <style type="text/css"></style>

外部导入

引用css文件(本地/网络) 文件目录 在这里插入图片描述

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="./style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    <h1 class="one">我是狗</h1>
    </body>
</html>
.one{
    color: red;
}

在这里插入图片描述

同样可以引用别人的网络资源中的css

<link href="地址" type="text/css" rel="stylesheet" />

比如一些字体或者特效样式




后续会推出

前端:js入门 vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:535620886 974178910 在这里插入图片描述

有问题可以下方留言,看到了会恢回复哦

预览图
评论区

索引目录