web-3：CSS_web3 css-CSDN博客

本文链接：https://blog.csdn.net/weixin_42587525/article/details/83933870

web-CSS

一.css介绍

css：即Cascading Style Sheet 层叠样式。
作用：调整页面元素的显示外观，实现网页布局。

二.css的使用

在HTML文档中使用CSS样式表，有三种方式。

1.内联样式/行内样式

特点：在标签中通过style属性，为元素设置样式。
语法:

<标签名 style="属性：值, 属性2:值;"></标签名>

CSS中使用属性和值来声明样式。
常用的CSS属性：

font-size ：设置元素的字体大小，取像素值。
color ：设置元素的字体颜色，取颜色值。
background-color ：设置元素的背景颜色，取颜色值。

2.文档内嵌

特点：在文档中使用<style></style>标签，为文档中的元素设置样式。
语法：

<style type="text/css">
    选择器{
        属性：值；
        属性2：值
        ...
    }
    选择器{
        属性：值；
        属性2：值
        ...
    }
</style>

选择器 ：用来匹配文档中的元素并为其设置样式。

例如：

p{
    color:red;
    font-size:32px;
}        
以上是，通过标签名匹配文档中所有的该元素，叫标签选择器。

3.外链

特点：在HTML文档中引入外部的样式表文件。
CSS外链的使用：

定义外部的样式表文件，以.CSS为后缀。
在HTML中使用<link rel="stylesheet" href="url" type="text/css">

三.CSS样式表的特征

1.样式的层叠性

可以为一个元素设置多个样式，共同起作用。

例如：
p{
    color:red;
    backgroung-color:green;
    font-size;32px;
}

2.样式的继承性

子元素可以继承父元素或祖先元素的某些CSS样式。
例如：大部分的文本属性都可以被继承。
块元素（h1 / p / div）默认宽度与父元素保持一致。

3.样式的优先级

从低到高依次为:
浏览器默认样式(最低)
文档内嵌样式 / 外链文件中的样式(中间，实际以代码书写顺序为准,“后来者居上”)
行内样式（最高）
如果发生样式冲突，参考优先级，决定元素最终样式。

四.选择器

选择器的作用
根据不同的选择器，匹配文档中相应的元素，并为其设置样式。

选择器的分类

标签选择器

根据标签名匹配文档中所有的该元素。

语法：
标签名{
    属性：值；
    属性2：值
}

id选择器

根据元素的id属性值匹配元素。
注意：所有的元素都有id属性，属性值自定义。ID属性具有唯一性。

语法：
#id属性值{
    样式
}

例如：为id为box的元素设置样式
#box{
    width：200px；
    height：200px；
    background-color：red；
}
<div id="box"></div>

class类选择器

根据标签的class属性值匹配元素，可以复用。
(id属性只能指定一个元素，class属性可以指定一大堆，这就叫“复用”。

语法：
.class属性值{
    样式
}

示例见06-class-selector.html

特殊用法

1.标签选择器与类选择器结合使用。

示例：
 /* 标签选择器与类选择器结合使用：c1类的p元素，设置为pink */
    p.c1{
        color: pink
    }

2.一个元素的clas属性值可以设置多个，使用空格隔开。

示例：
<!-- 一个元素可以属于两个类，共同拥有两个类的属性值，     -->
    <p class="c1 c3">段落文本2</p>

群组选择器

可以为一组元素（标签，id，类均可）设置共同样式。

选择器1，选择器2，选择器3{样式}

常见于清除浏览器默认样式，
示例见:07-group-selector.html

后代选择器

特点：匹配满足要求的所有后代元素。

选择器1 选择器2{样式}
/* 选择器1：表示匹配父元素 */  
/* 选择器2:表示后代元素 */
/* 见示例：08-children-selector.html */

子代选择器

只匹配父元素中的直接子元素。

选择器1>选择器2{样式}
/* 表示在选择器1对应的元素中，匹配满足选择器2的直接子元素 */

伪类选择器

作用：针对元素不同的状态（如超链接访问前后），设置相应的样式。

分类：

超链接伪类选择器：针对超链接不同状态设置样式。
动态伪类选择器：所有元素都可以使用。

伪类选择器的使用：

超链接伪类选择器

:link :访问前
:visited :访问后：
伪类选择器需要与其他选择器结合使用，不能单独使用

a:link{超链接访问前的样式}
a:visited{超链接访问后的样式}

示例见：09-link.html

动态伪类选择器**

1.:hover :鼠标划过时元素的属性状态
2.:active :鼠标点按（激活）时元素的属性状态

a:hover{设置鼠标划过时的样式}
a:active{设置鼠标点击时的样式}

示例见：09-link.html

超链接使用注意：

超链接可以设置四种状态的样式，书写时必须按照以下顺序定义(LoVe/HAte爱恨原则)：
（:link :visited :hover :active）
网页中一般会直接对a标签设置默认样式，配合:hover改变超链接文本色或背景色。

接上：动态伪类选择器:
3.:focus :表示文本框或密码框在获取焦点时的状态。
焦点状态：

选择器的优先级

选择器的优先级看权重(值)，全值越大，优先级越高。

基础选择器的权值

标签选择器 1
类选择器、伪类选择器 10
id选择器 100
行内样式 1000

组合选择器，除了群组选择器，其他的选择器权值由各选择器的权值相加得到。

尺寸与颜色单位

尺寸

1.属性：width / height

2.单位：

px 默认单位，表示像素。
% 百分比单位：参照父元素对应属性的值获取尺寸。
cm 厘米
mm 毫米
pt 磅（1pt = 1/72 in）
in 英寸(inch) (1英寸 = 2.54cm)
em 默认情况下 1em = 16px
rem 与字体大小相关

颜色取值

1. 英文单词表示颜色

2. rgb()；使用红绿蓝三原色表示，每种颜色取值范围0~255。

颜色	rgb取值
red	rgb(255,0,0)
green	rgb(0,255,0)
blue	rgb(0.0.255)
black	rgb(0.0.0)
white	rgb(255,255,255)

2. rgba(r,g,b,a)

a表示alpha 透明度，取值0~1
0表示透明，1表示不透明
使用小数表示半透明（0.5 、 .5）

3. 十六进制表示颜色
语法：
十六进制取值范围0_9，af
表示颜色 : 以#开头，每两位为一组，代表一种三原色。

颜色	取值
rgb(255,0,0)	#ff0000
green	#00ff00
blue	#0000ff

4. 短十六进制表示颜色

#开头，采用三位十六进制代表三原色
浏览器在解析时，会自动会对每一位进行重复，补全成
长十六进制
#f00; -> #ff0000
#000;
#fff