所有标签都有一个默认样式,称为浏览器样式,或者默认样式
行内样式:通过在标签中设置style属性来达到实现控制标签的样式的效果。eg:
<h1 style="color:red;">这是一个标题</h1>
可以设置多个css属性
嵌入样式:在head标签中嵌套一个style标签,在style标签中可以书写css样式
外联样式:通过link标签
后代选择器:空格
并集选择器:逗号
子元素选择器:> 只选择儿子辈的元素
顺序不能颠倒
伪类
LVHA原则
/*未访问过的链接*/
a:link {
color: red;
}
/*已访问过的链接*/
a:visited { color: gray; }
/*进入*/
a:hover {
color: green;
}
/*被点击*/
a:active {
color: purple;
}
层叠性,继承性
文字相关的属性可以继承,盒子相关不能继承
一般情况下对body进行字体设置
css优先级
-
行内样式>id选择器>类选择器>标签选择器
-
继承的样式优先级 大于 默认的样式优先级
-
通配符选择器优先级大于 继承的样式优先级
-
标签选择器的优先级大于通配符选择器优先级
复合选择器的优先级
行内样式>id选择器>类选择器>标签选择器
css单位 与 文字排版
dispaly:控制标签的显示模式
- none 移除元素
- inline 让元素变成行内元素, 不能设置宽高,只有左右边距,不独占行
- block 让元素变成块级元素, 可以设置宽高,上下左右边距,独占行
- inline-block 变成行内块元素, 可以设置宽高,左右边距,不独占行
行内元素不能设置宽高,只能通过内容来撑开宽高;
visibility:hide;//隐藏
display:none;// 移除,不影响页面布局
css颜色表示
- rgb(r,g,b)
-
rrggbb
r、g、b :0-255 获取百分比
rr、gg、bb:0-255 的十六进制
css长度单位
一般用相对长度单位:px、em、rem em:当前字体大小,例如:当前元素的字体大小为12px,那么1em=12px;
文字排版
font-size:字号大小,一般页面12px、14px
font-family: 字体
非衬线体收尾
字体系列
衬线体和非衬线体
字体加粗
设置字体不需要单位
- b标签
- font-weight:700; 100-900 :400正常
字体风格
font-style
- normal:默认值,标准
- italic:使用斜体显示,如果系统没有斜体的字体,则正常显示
- oblique:倾斜
字体样式
font:style weight size family
字间距
letter-spacing:字符与字符之间的空白,默认为normal ,px为单位
li {
font-family: "微软雅黑";
font-size: 16px;
font-style: oblique;
font-weight: 700;
letter-spacing: normal;
letter-spacing: 20px; /*字符间距*/
word-spacing:10px;/*只对字符之间有空格的有影响*/
}
a {
display: inline-block;
background-color:silver;
width: 100px;
height: 50px;
line-height: 50px;/*文本垂直居中*/
text-align: center;/*文本水平居中*/
letter-spacing: 30px;
text-decoration: none;/*去掉下划线*/
}
行高 line-height
文本装饰
text-decoration
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
水平对齐方式 text-align
- left: 默认值
- right
- center
首行缩进
只能设置于块级标签
text-indent :值为em的倍数,不同单位的数值,浏览器宽度的百分比,允许使用负值,建议用em作为单位
text-indent:-9999px;text-indent:-9999px;/*用于隐藏网站logo的标题,易于seo*/
空白符处理
white-space:normal; 正常显示,自动折行
white-space: nowrap; 即使超过盒子宽度,文本也不换行显示
white-space: pre; 写html的时候什么样式,显示就什么样式
word-break 自动换行
- normal 不打断单词显示
- break-all 允许单词打断换行
- keep-all 只能在半角空格或连字符换行,单词不换行,空格和换行符才换行
网友评论