CSS3简单介绍及其选择器与属性简单用例

没错就是这

已于 2022-07-22 16:32:26 修改

阅读量130

点赞数 4

分类专栏：前端知识文章标签：前端 css3 css

于 2022-07-22 16:27:56 首次发布

本文链接：https://blog.csdn.net/m0_48839439/article/details/125878503

版权

前端知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

一、CSS主要是什么作用？

如果说HTML是网页内容的框架、载体。那么CSS则是网页的装饰，它可以改变网页内容的外观形象，装饰HTML，修改内容的样式。

二、CSS三大特性

继承性
优先级
层叠性

1.继承性

当给父元素设置一些属性时，子元素（后代）也会使用这些属性，这个便是继承性。

不是所有属性都有继承性的，大多数属性没有继承性，少数属性有继承性。

概括来说只有颜色、文字、字体行高的对齐以及水平对齐方式，还有列表的样式具有继承性。这几样属性是可以继承的。

继承性中的特殊性

a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的。

2.优先级

当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就依照优先级来确定了。

选择器	例如	权值
！important		优先级别最高
内联样式（style属性）	如: style="..."	1000
id选择器	#xxxx	100
class类、伪类、属性选择器	.xxx	10
标签选择器、伪元素选择器	div p span	1
通配符选择器、复合选择器、否定伪类	+、>、~、（：not）	0

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高。

注意点: 

1.!important只能用于直接选中, 不能用于间接选中

2.通配符选择器选中的标签也是直接选中的

3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升

4.!important必须写在属性值的后面，分号前面

5.!important前面的感叹号不能省略

6.但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

4.层叠性

可以说是CSS处理冲突的一种能力。

有些看不见的属性效果不是消失了，而是被覆盖了。

注意点: 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性。

<style>
       #cd{
        color: skyblue;
       }
       .cd{
        color: yellowgreen;
       }
</style>
<body>
<div id="cd" class="cd">层叠性</div>
</body>

div文字内容“层叠性”显示出来的颜色是“skyblue”，因为id选择器的优先级比class类选择器的优先级高，所以相同属性color是按照id选择器的样式来显示。此时，类选择器的属性样式并不是消失了，而是被优先级较高的id选择器的相同属性样式覆盖了，如把id选择器相同的属性样式注释掉或者把选择器换成比类选择器优先级低的选择器后，类选择器的此相同属性的样式便会显示出来。

<style>
   
      /* #cd{
        color: skyblue;
       } */
       .cd{
        color: yellowgreen;
       }
</style>

三、语法

1.四种连接样式

内联样式
内部链接
外部链接
使用import引入外部css文件

 <!--1. 内联样式 行内样式 -->
 <div style="background-color:aquamarine;">xxxxx</div>

<head>
<style>
<!--2.内部样式-->
    .div{
       color:red;
     }
</style>
</head>

<head>
 <!-- 3.外部样式  link标签引入外部css -->
  <link rel="stylesheet" href="外部css文件地址">
</head>

<style>
 /* 4. 使用@import引入css文件 不推荐 必须放在style标签的第一行 
  缺点：优先加载html 再加载css 兼容性较差 ie5以下不支持 属于css内容*/
 @import url('外部css文件地址');
</style>

2.CSS选择器

选择器（Selector）HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器。

选择器主要包含有：标签选择器、id选择器、类选择器、后代选择器、子元素选择器、交集选择器、并集选择器、兄弟选择器、伪类选择器、序选择器（结构伪类选择器）、动态伪类选择器、否定伪类选择器、伪元素选择器、属性选择器、通配符选择器、组合选择器。

3.属性

对CSS其中几个属性的理解

1.列表项属性

1.1 list-style-type 设置列表项标志类型（如可以为圆形、正方形、空心圆等等)

1.2 list-style-position 设置列表项标志出现的位置（当此属性取值为outside：列表项标志出现在主块框的外部；当取值为inside：列表项标志出现在主块框的内部）

1.3 list-style-image 自定义设置列表项标志（取值通过为 url（所指定图标的位置））

1.4 也可以使用缩写形式

<style>
ul{
 list-style：circle url(./images/02.png) inside; ;
}
</style>

如：

<style> 
ul{
                /* 列表标志项 */
                list-style-type: square;
                /* 设置列表标志项的位置 */
                list-style-position: inside;
                /* 自定义列表标志项 */
                list-style-image: url(./images/01.png);
                /* 缩写形式 */
                list-style: circle url(./images/02.png) inside;
            }
</style>

如要取消标志项则可以设置列表没有任何样式 list-style: none;

2.文本属性

字体颜色	color
打开和关闭斜体文本	font-style
设置字体粗细	font-weight
设置文字字号大小	font-size
设置文字字体	font-family
网络字体	wevFont
设置或取消文本修饰	text-decoration
文字排列方式	text-align
文本缩进属性	text-indent
设置或取消字体改变	text-transform
设置文本阴影	text-shadow

3.其他一些样式

line-height 设置行高

display（显示方式的切换）:

inline 行内显示宽高无效；block 块级显示，宽高有效

inline-block 行内块元素（行内显示，宽高有效）

none 不显示，不占据空间

flex 伸缩盒布局

visibility：

hidden 隐藏

visible 显示

opacity： 显示内容透明度，取值范围0-1，数字越小透明度越大且占据屏幕空间。

overflow （溢出处理）：

hidden 超出内容隐藏

auto 超出内容产生滚动条

scroll 超出内容产生自适应的滚动条

cursor(指定光标样式)：

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

如以下例子：

<style>
        .div1{
            width: 300px;
            height: 300px;
            background-color: rgb(235, 152, 152);
            /* 第一种：使用display隐藏元素  不占据屏幕空间*/
            /* display: none; */
            /* 第二种：visibility隐藏元素 占据屏幕空间 */
            /*  : hidden; */
            /* 第三种：opacity隐藏元素 范围0-1 占据屏幕空间 */
            /* opacity: 0; */
            /* 第四种：overflow超出父元素的部分隐藏 */
            /* overflow: hidden; */
            /* 超出父元素的部分以滚动条的形式显示 */
            /* overflow: scroll; */
            /* 子元素超出内容自适应 */
            overflow: auto;
            /* 设置游标表现形式 */
            cursor: pointer;

        }
    </style>
</head>
<body>
    <div class="div1"><div>1div</div>
    <div>2div</div>
    <div>3div</div>
    <div>4div</div>
    <div>5div</div>
    <div>6div</div>
    <div>7div</div>
    <div>8div</div>
    <div>9div</div>
    <div>10div</div>
    <div>11div</div>
    <div>12div</div>
    <div>13div</div>
    <div>14div</div>
    <div>15div</div>
    <div>16div</div>
    <div>17div</div>
    <div>18div</div>
    <div>19div</div>
    <div>20div</div>
    <div>21div</div>
    <div>22div</div>
    <div>23div</div>
    <div>24div</div>
    <div>25div</div>
    <div>26div</div>
    <div>27div</div>
    <div>28div</div>
    <div>29div</div>
    <div>30div</div>
    <div>31div</div>
    <div>32div</div>
    <div>33div</div>
    <div>34div</div>
    <div>35div</div>
    <div>36div</div>
    <div>37div</div>
    <div>38div</div>
    <div>39div</div>
    <div>40div</div>
    <div>41div</div>
</body>