网页样式设置
注意:
1、运用CSS3私有属性时,先写私有的CSS3属性,在写标准的CSS3属性
2、当一个CSS3属性成为标准属性,并且被主流浏览器的最新版普遍兼容时,就可以省略私有的CSS3属性

引用CSS样式表的三种常用方式

1、行内式
2、内嵌式
3、链入式

行内式(内联样式) 通过标记的style属性来设置元素样式
<标记名 style=“属性:属性值;属性:属性值”><标记名>
内嵌式 写在HTML文档的头部中,并用
链入式 将所有的样式放在一个或多个 以.css为扩展名的外部样式文件。
通过标记将外部文件连接到HTML中


type定义文档类型,
rel定义文档与被链接文档之间的关系,stylesheet表示样式表文件

注意:内嵌式把css代码放在头部提前备解析避免内容下载后没有样式的尴尬

css基础选择器

标记选择器 用HTML标记名称作为选择器
类选择器 class选择器 .类名{ 属性:属性值 }
id选择器 #id名{ 属性:属性值 }
通配符选择器 *{ 属性:属性值 }
标签指定式选择器 交集选择器
后代选择器 派生选择器 p strong { 属性;属性值}
选择元素或者元素组的后代
并集选择器 群组选择器 各个选择器通过逗号连接而成

注意:
1..类名的第一个字母不能使用数字,严格区分大小写,一般采用小写英文字符
2..通配符选择器设置样式对所有的HTML都生效,不管标记是否需要样式,反而降低了代码的执行速度

文本样式属性

属性 属性值
font-size 字号大小 相对长度单位 [em(相对于当前对象内文字的字体尺寸)\px(像素)\
in(英寸)\cm(厘米)\mm(毫米)\pt(点)]
font-family 字体 1..各种字体之间用英文状态下的逗号隔开
2..中文字体加引号,英文字体不用,英文字体写在中文字体之前
3..包含空格\#\$等要加上英文引号
4..尽量使用系统默认字体,保证在任何用户浏览器中都可以正常显示
font-weight 字体粗细 normal (默认值,定义标准字符)
bold (粗体)
bolder (更粗的字符)
lighter (定义更细的字体 )
100~900(100的整倍数) (定义由细到粗的字体,其中400=normal ,700=bold )
font-style 字体风格 normal(默认值)
italic ( 斜体 )
oblique(倾斜)
font 综合设置
@font-face 定义服务器字体 @font-face{
font-family:字体; 在用户计算机没有安装字体时,使用任何喜欢的字体
src:字体路径;
}
word-wrap 长单词和UR
自动换行
选择器{word-wrap:属性值;}
属性值: normal (默认值,只在允许的断字点换行)
break-word(在长单词或URL地址内部进行换行)

文本外观属性

属性值
color 文本颜色
letter-spacing 字间距 数值,可为负数 (默认值:normal)
word-spacing 单词间距 英文单词之间的间距对中文无效
line-height 行间距
text-transform 文本转换 控制英文字符的大小写
none(不转换,默认值)
capitize(首字母大写)
uppercase(全部字符转换成大写)
lowercase(全部字符转换成小写)
text-decoration 文本装饰 none(默认值)
underline(下划线)
overline(上划线)
line-through(删除线)
可同时有多个属性值
text-align 水平对齐方式 left(左对齐,默认值)
righ(右对齐)
center(居中对齐)
text-indent 首行缩进 仅适用于块级元素,对行内元素无效
white-space 空白符处理 不管源代码有多少空格,在浏览器中只有一个字符的空格
normal(默认值)
pre (预格式化,按文档书写格式保留空格,空行原样保留)
nowrap(空格空行无效,除非
,内容超出元素边界也不换行,
若超出浏览器自动增加滚动条)
text-shadow 阴影效果 选择器{text-shadow : h-shadow v-shadow blur color }
水平阴影距离;垂直阴影 ;模糊半径;颜色
text-overflow 标识对象内益处文本 clip:修建溢出文本,不显示省略标记”…”
ellipsis:省略标记

CSS基本特征:层叠性和继承性

层叠性:

多种css样式的叠加

继承性:

书写CSS样式表时,子标记会继承父标记的某些样式但不是所有的css属性都可以继承

css优先级

定义css样式时.经常出现或更多郭泽应用在同意元素上,这时就会出现优先级问题

常见的选择器权重优先级:!important>行内样式>id>class>tag>*>继承>默认;

!important可以提升样式优先级,但不建议使用。如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如:background: blue !important;
如果两条样式都使用!important,则权重值高的优先级更高
在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前面的
样式指向同一元素,权重规则生效,权重大的被应用
样式指向同一元素,权重规则生效,权重相同时,就近原则生效,后面定义的被应用
样式不指向同一元素时,权重规则失效,就近原则生效,离目标元素最近的样式被应用
[

](https://blog.csdn.net/weixin_39808181/article/details/114043999)