CSS笔记

最新推荐文章于 2024-09-15 21:53:51 发布

陈两全

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量892

点赞数 36

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/2201_76100326/article/details/141053165

版权

8.9

1.css的三种引入方式

css可以通过三种方式引入，分别是：行内样式、内部样式、外部样式

1.1.行内样式：

行内样式是通过在标签的开始标签里面加上style属性，里面填写样式属性

<div style="属性一:属性值一; 属性二:属性值二; ..."></div>

1.2.内部样式：

内部样式是通过写head标签内的style标签内的样式属性

<head>
    <style>
        选择器{
                属性一:属性值一;
                属性二:属性值二;
                ...
              }
    </style>
</head>

1.3.外部样式：

外部样式是在head标签内通过link标签将css文件链接到html文档里面

<head>
    <link rel="链接的文档类型" href="文件的路径地址">
</head>

2. 特殊的引入方式

除了上述三种引入方式外还有一种特殊的引入方式@importurl:（'css文档地址'）它可以写在任何地方css文档里面相互嵌套也可以，行内样式嵌套也可以

3.css样式冲突时

当css多个样式冲突时，采用就近原则，那个css样式离内容越近就会生效那个

4.css选择器

4.1.释义：

css 选择器用于选择你想要的元素的样式的模式要使用css对HTML页面中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要用到css选择器 HTML页面中的元素就是通过CSS选择器进行控制的

4.2.标签选择器

使用标签名来进行选择，同一个html文件里面如果有多个相同的标签则会同时选中

<div>示例</div>

div{
    属性:属性值;
    ...
    }

4.3.类选择器

给标签的开始标签内添加class属性并赋值，就可在css中使用 .class属性值的方式进行选择这种方式就被称为类选择器，class属性值可以被叠加中间使用空格隔开，当文件中有多个class属性值相同的标签时，则全部都会被选中

<div class="top"></div>

.top{
    属性:属性值;
    ...
    }

4.4.ID选择器

给标签的开始标id属性并赋值，就可在css中使用 #id属性值的方式进行选择这种方式ID选择器，原则上每个页面的id值只能出现一次，不能重复，但是实际上当id值重复时，不会报错也会正常解析，可以但是请尽量遵守原则

<div id="title"></div>

#title{
    属性:属性值;
    ...
    }

4.5.通配符选择器

通配符选择器会自动匹配页面中的所有元素，无论标签是什么。使用 * 来进行选择

*{
    属性:属性值;
    ...
 }

4.6.分组选择器

在页面中想要批量使用某个样式时，可使用分组选择器，无论是标签，或者类，或者ID，都可以进行选择，每个选择其之间使用 , 隔开

<div class="top"></div>
<p id="title"></p>
<span></sapn>

.top,#title,p

4.7.派生选择器

派生选择器又分为四小类分别是后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器，在实际应用中常用的只有后代选择器和子元素选择器，相邻兄弟选择器和普通兄弟选择器常常被用于增加选择器的权重而使用

4.7.1.后代选择器

后代选择器使用空格隔开选中的是所有后代

<div>
    <ul>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>
    <ul>  
        <li></li>     
    </ul>
</div>

div ul{
      属性：属性值：
      ...
      }

此时div标签中的所有ul标签都会被选中

4.7.2.子元素选择器

子元素选择器使用 > 隔开，选中的是子元素子元素的子元素则不会被选中

<div>
    <ul>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>
    <ul>  
        <li></li>     
    </ul>
</div>

div>ul{
    属性：属性值；
      }

此时选中的只有最外层的两组ul，li里面的ul标签则没有被选中

4.7.3.相邻兄弟选择器

相邻兄弟选择器使用 + 隔开，选择的只有符合相邻条件的兄弟标签

<div>
    <ul>
        <li></li>
    </ul>
    <p></p>
    <p></p>
    <p></p>
</div>

div ul + p{
    属性：属性值；
      }

此时被选中的之后第一个p标签，其他两个p标签不与ul相邻所以不被选中

4.7.4.普通兄弟选择器

普通兄弟选择器使用 ~ 隔开，选择的是兄弟关系的所有符合条件的标签

<div>
    <ul>
        <li></li>
    </ul>
    <p></p>
    <p></p>
    <p></p>
</div>

div ul ~ p{
    属性：属性值；
      }

此时被选中的是全部的p标签

4.8.选择器的权重以及计算

4.8.1.选择器的权重

权值等级划分，一般来说是划分4个等级：

4.8.2.选择器权重的计算

按相加计算，不同的选择器代表的权重也不相同

4.8.3.选择器的特殊权重

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。当 !important 规则被应用在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪个位置。

1.css选择规则的权值不同时，权值高的选择器优先

2.css选择规则的权值相同时，后定义的选择器规则优先

3.css属性后面加 !important 时，无条件绝对优先

总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

5.css的三大特性

css的三大特性分别是，层叠性、继承性、优先性

5.1.css的层叠性

1.所谓层叠性是指多种CSS样式的叠加

2.层叠性是浏览器处理冲突的⼀个能力,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）

3.样式不冲突，不会层叠

4.样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

5.2.css的继承性

1.所谓层叠性是指多种CSS样式的叠加

2.层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）

3.样式不冲突，不会层叠

4.样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

5.3.css的优先性

1.权重的优先级，决定哪个样式最终⽣效

2.权重相同：后者⽣效；权重不同：权重⾼者⽣效

6.css的字体

6.1.字体样式

在 css中使用font-style来控制字体的样式

选择器{
        font-style:normal;/*指定文本为正常样式*/
        font-style:italic;/*指定文本为斜体*/
      }

6.2.文本字体

在 css中使用font-family来控制文本的字体，在设置文本字体时应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体，每种字体之间用 , 隔开

选择器{
        font-family:字体1,字体2,...;/*为文本设置字体*/
      }

6.3.字体粗细

在 css中使用font-weight来控制文本的粗细

1.normal：正常的字体。相当于number为400

2.bold：粗体。相当于number为700

3.bolder：特粗体。也相当于strong和b标签的作⽤

4.lighter：细体

5.用数字表示⽂本字体粗细。取值范围：100~900

选择器{
        font-weight:属性值;/*设置字体的粗细*/
      }

6.4.字体大小

在 css中使用font-size来控制文本的大小

2.相对于父对像中字体尺寸进行相对调节。使用成秘比例的em单位计算。可选参数值：smaller | larger。

3.用数值指定文字大小，不允许负值。

4.用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸，不允许负值。

选择器{
        font-size:属性值;/*设置字体的大小*/
      }

6.5.字体行高

在 css中使用line-height来控制文本的行高

1.normal：默认值。

2.用长度值指定行，可以为负值。

3.用百分比指定行高，其百分比取值是基于字体的高度尺寸，可以为负值。

4.设置数字，此数字是当前的字体大小的倍数。

选择器{
        line-height:属性值;/*设置字体的行高*/
      }

6.6.综合设置

CSS字体属性font定义字体，加粗，大小，文字样式，该属性是复合属性，属性值之间使用空格隔开，格式如下

font：<font-style> <font-weight> <font-size>/<line-height> <fon-family>

选择器{
        font:属性值1 属性值2 属性值3/属性值4 属性值5;/*综合设置文本属性*/
      }

6.7.引入字体

为了避免用户字体缺少，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示直接将下载好的字体复制到当前文件夹下（网站下载新字体），想要使用外部字体，需要进行引入

/*引入字体*/
@font-face{
          font-family:字体名称;/*看自己心情设置，最好遵守取名规范*/
          src:url('字体文件的路径');
          }
/*使用字体*/
选择器{
      font-family:自己设得字体名字;
      }

7. css的文本

7.1.文本缩进

在css中使用text-indent进行文本的首行缩进

1.用长度值指定文本的缩进，可以为负值。

2.同百分比指定文本的缩进，可以为负值。

选择器{
        text-indent:属性值;/*设置文本首行缩进*/
      }

7.2.文本对齐

在css中使用text-align进行文本的对齐

1.left：内容左对齐。

2.center：内容居中对齐。

3.right：内容右对齐。

4.justify：内容两端对齐，对最后一行无效。

justify属性值注意：样式的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）

选择器{
        text-align:属性值;/*设置文本对齐方式*/
      }

7.3当文本对齐的属性值是justify时，最后一行文字的解决办法

7.3.1.当文本只有一行时

选择器{
      width:100%;
      border:1px solid #f00;
      text-align-last:justify;
      }

7.3.2.当文本有多行时

使用伪元素需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行设定after的width为100%，生成第二行设置为行内快元素，设置的width才有效

选择器{
        text-align: justify;
      }
选择器:after{
        content:"";
        display:inline-block;
        width:100%;
            }

7.4.文本修饰

在css中使用text-decoration进行文本的修饰

text-decoration 属性设置⽂本装饰线条的位置，综合属性可以单独设置 text-decoration-line、 text-decoration-color 和 text-decoration-style 属性 text-decoration-line

1.none 指定⽂字⽆装饰

2.underline 指定⽂字的装饰是下划线

3.overline 指定⽂字的装饰是上划线

4.line-through 指定⽂字的装饰是贯穿线

注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条 text-decoration-style

5.solid 线条显示为单行

6.double 线条显示为双线

7.dotted 线条显示为点线

8.dashed 线条显示为虚线

9.wavy 线条显示为波浪线

选择器{
        text-decoration:属性值;/*文本的修饰*/
      }

7.5.单词间距

在css中使用word-spacing进行英文单词之间的间距调整，注意只设置英文单词之间的间距，对中文无效

1.normal默认间隔

2.用长度值指定间隔，可以为负值

选择器{
      word-spacing:属性值;/*英文文本的单词间距*/
      }

7.6.文本间距

在css中使用letter-spacing进行字符之间的间距调整，注意是英文的每个字符

1.normal默认间隔

2.用长度值指定间隔，可以为负值

选择器{
      letter-spacing:属性值;/*英文文本的单词间距*/
      }

陈两全

关注

36
点赞
踩
30

收藏

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

分享到 QQ

分享到新浪微博

扫一扫