网页样式设置
注意:
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样式时.经常出现或更多郭泽应用在同意元素上,这时就会出现优先级问题
常见的选择器权重优先级:!important>行内样式>id>class>tag>*>继承>默认;
!important可以提升样式优先级,但不建议使用。如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如:background: blue !important;
如果两条样式都使用!important,则权重值高的优先级更高
在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前面的
样式指向同一元素,权重规则生效,权重大的被应用
样式指向同一元素,权重规则生效,权重相同时,就近原则生效,后面定义的被应用
样式不指向同一元素时,权重规则失效,就近原则生效,离目标元素最近的样式被应用
[
](https://blog.csdn.net/weixin_39808181/article/details/114043999)