CSS的总结

Z99879835

已于 2024-07-20 09:25:18 修改

阅读量385

点赞数 3

文章标签： css 前端 html

于 2024-07-18 21:46:37 首次发布

本文链接：https://blog.csdn.net/Z99879835/article/details/140477500

版权

1.内联样式

<!-- 内联样式：就是将样式写在元素的开始标签里的style属性中

    div:
        宽度：默认是撑满父元素的内容区宽度
        高度：自己的内容区的文字撑起来的高度
        可以自定义div的宽和高：width和height
-->

<div style="border: 1px dotted red;width: 500px; height: 300px;" >我是div</div>
    <p>123</p>

2.内部样式表

内部样式表，是将样式定义到HTML的<head>元素的子元素<style>里，使用选择器来定位要设置样式的元素。

语法：

选择器｛

属性：值；

····

<head>
    <style>
        <!--id选择器 #d1是自己设置的名字-->
        #d1{
            width:100px;
            height:100px;
        }
</style>
<body>
    <div id="d1">我是div</div>
</body>

3.外部样式表

就是将样式单独封装到一个文件中，文件的扩展名是.css,再html文件中使用link标签，将样式文件引入到该html的页面中。

将样式写好然后再CSS文件夹下保存后缀名为.css的my文件，之后在html页面中用link标签即可使用。link标签在head标签中使用。

<head>
<!-- rel指定文件类型，href指定文件位置 -->
    <link rel="stylesheet" href="./CSS/my.css">
</head>

后续在body内即可根据选择器类型引用

<body>
    <div id="d3">div</div>
    <div id="d2">div2</div>
</body>

4.标签选择器

标签选择器也叫元素选择器，它是通过标签名找到该页面中所有的这类标签来设置样式。

结构：**标签名｛css属性名:属性值;}

注意：1.标签选择器选择的是这一类标签而不是单独的一个标签

2.标签选择器无论该标签的嵌套关系有多深，它都能找到对应的标签

在标签<head>中设置<style>

<style>
        
        p{
            font-size: 20px;
            color: #ef49ad;
        }
</style>

<p>段落1</p>

运行结果：

5.类选择器

类选择器写在<head>中的<style>中，它是以小圆点开头(.)的样式选择器，小圆点后面是具体的类名。

结构：.类名｛属性名：属性值｝

注意：1.所有的标签都有class属性，class属性值为类名（class="**"，那么**就是类名)

2.类名可以有数字，字母，下划线或中划线组成，但是不能以数字和-（中划线）开头。

3.一个标签可以有多个类名，类名中间用空格隔开（<p class="c2 c3"> c2 c3是类名）

4.多个标签的class值可以一样，也就是说一个类选择器可以选中多个标签。

<head>
    <style>
        .c2 {
            font-size: 30px;
            color: #9e1147;
        }
        .c3{
            font-style:italic ;
            /* font-size: 30px; */
        }
    </style>
</head>
<body>
    <p class="c2 c3">段落1</p>
</body>

6.id选择器

结构：#id属性值（id="" 双引号里的就是id属性值）{css属性名：值}

作用：通过id属性值，找到页面中带有这个id属性值的标签来设置其样式。

注意：

1.id必须使用#作为开始符号，紧跟着id的具体值。

2.id相当于身份证号，id的值不可以重复，具有唯一性。

3.所有标签都有id属性，一个标签只能有一个id属性值

4.一个id选择器只能选中一个标签

与class的区别：

1.在属性上的区别：class的值可以重复，id的值不可以重复。

2.在选择器上的区别：class选择器以“.”开头，而id选择器是以“#”开头。

3.在开发过程中类选择器用的相对较多，id在实际开发过程中可能会造成代码的冗余。

    <div id="d1">div1</div>
    <p id="d3">段落1</p>

在html标签中

    <style>
       #d2 {
                border: 1px solid red;
                width: 200px;
                height: 200px;
           }
    </style>

7.通配符选择器

结构：*｛css属性名：属性值｝

作用：通配符选择器就是*选择器，它可以选中所有元素来设置样式

<head>
    <style>
       * {
              color: red;
         }
    </style>
</head>

所有标签字体样式变为红色：

8.复合选择器

（1）交集选择器

语法：选择器1选择器2选择器3...{css属性名：属性值}

作用：选择此页面内同时满足多个选择器的标签（选择器1选择器2选择器3必须紧挨着），就是找到能同时满足选择器1选择器2选择器3的标签来设置标签样式。

注意：

1.选择器之前没有东西隔开，必须是紧挨着的

2.如果交集选择器中有标签选择器，标签选择器必须放在最前面

   <head>  
   <style>
        .c1#p1 {
            color: blue；
        }
        
        p.c2 {
            color: #ef49ad;
            font-size: 50px;
        }
   </style>
   </head>

    <body>
        <h1>交集选择器的测试</h1>
        <div class="c1">div1</div>
        <div class="c1">div2</div>
        <p class="c1" id="p1">wewqeq</p>
        <p class="c2">段落2</p>
    </body>

class值为c1，id值为p1的标签改变样式

（2）并集选择器

语法：选择器1，选择器2，选择器3,...,......{css样式}（选择器之前用逗号隔开）

注意：

1.选择器可以是基础选择器也可以是复合选择器

2.每组选择器一行写一个，提高代码的可读性

<head>
    <style>   

        #s1,
        .c4,
        #d3,
        .c3 {
            font-size: 50px;
            color: #ec261b;
        }
    </style>
</head>

<body>   
     <h1>并集选择器</h1>
        <span id="s1">用户名已经存在</span><br>
        <span class="c3">密码不正确</span><br>
        <p class="c4">段落三</p>
        <div id="d3">div3</div>
</body>

值为s1,c4,d3,c3的标签都会被选中

9.关系选择器

案例代码：

<body>
    <div>
        我是div
        <p>
            我是div中的p
            <span>我是p中的span</span>
        </p>
        <div>我是div中的div
            <span>我是div中div中的span3</span>
        </div>
        <div>
            <span>
                我是div中div中的span4
            </span>
        </div>
        <span>我是div中的span1</span>
        <span>我是div中的span2</span>
    </div>
    <span>我是div之外的span1</span>
    <span>我是div之外的span2</span>

</body>

（1）父子选择器

父子选择器：通过父亲选择儿子。

用法:父>子｛CSS样式｝

/* <!-- 父子选择器演示 --> */
        div>span {
            font-size: 50px;
            color: #ec261b;

        }

运行结果：选择直接嵌套在div元素中的span元素

（2）后代选择器

后代选择器：通过祖先选择后代

用法：祖先空格后代｛CSS样式｝

div span {
            font-size: 80px;
            color: #ef49ad;
        }

运行结果：选择div元素中所有的span元素

第二种情况

div p span {
            font-size: 80px;
            color: #ef49ad;
        }

运行结果：选择所有在div元素内p元素内的span元素

（3）兄+弟选择器

兄+弟选择器：通过兄长选择紧邻的弟弟

用法：兄+弟｛CSS样式｝

p+div {
            background-color: aqua;
      }

运行结果：选择所有p元素内的第一个div元素（div中的内容也会改变样式）

（4）兄~弟选择器

兄~弟选择器：哥哥的符合条件的所有弟弟被选择。也就是选择所有在兄元素之后同层级的弟元素。

用法：兄~弟｛CSS样式｝

div~span {
            color: #bd8d89;
         }

运行结果：选择所有在div元素之后的同层级的span元素。

10.属性选择器

案例代码：

<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="bac">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p title="acb">秦时明月汉时关，</p>
    <p>不教胡马度阴山。</p>
</body>

（1）选择含有指定属性的元素

语法：[属性名]{}

[title] {
            color: aqua;
        }

运行结果：选择所有具有title属性的元素

（2）选择含有指定属性及指定属性值的元素

语法：[属性名=属性值]={}

[title=a] {
            color: brown;
        }

运行结果：选择所有title属性且值为a的元素

（3）选择含有指定属性和指定属性值开头的元素

用法：[属性名^=属性值]{CSS样式}

[title^=a] {
             color: #ef49ad
           }

运行结果：选择了所有title属性并以‘a’开头的元素

（4）选择含有指定属性及指定属性值结尾的元素

语法：[属性名$=属性值]{CSS样式}

 [title$=b] {
            color: #fd8c24;
            }

运行结果：选择所有title属性并且以‘b'结尾的元素

（5）选择含有指定属性包含指定属性值的元素

语法：[属性*=属性值]

[title*=c] {
            color: #ec261b;
           }

运行结果：选择所有title属性值包含’c'的元素

Z99879835

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫