font-weight
属性值 | 描述 |
normal | 默认值 |
bold | 加粗 |
100-900 | 400=normal;700=bold;注意这个数字后边不能跟单位 |
font-style
属性值 | 作用 |
normal | 默认值 |
italic | 浏览器显示斜体的样式 |
注意:我们平时很少给文字加斜体,反而要把em元素和i元素的斜体改为正常
字体的复合属性
font: font-style font-weight font-size/line-height font-family
font: italic 700 16px 'Microsoft yahei' ;
文本缩进
div{
text-indent: 10px;
}
p{
text-indent: 2em;
}
em是一个相对单位,就是当前元素的一个文字的大小;
行间距
p{
line-height:26px;
}
Element语法:vscode支持
·选择直接后代 '>',而不是所有的后代
.nav>a{
color:red;
}
并集选择器 ','
div,
p{
color:red
}
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,例如给链接添加特殊效果,或者选择第一个,第n个元素。:hover :first-child
链接伪类选择器
a:link /*选择所有的未被访问的链接*/
a:visit /*选择所有的已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
为了确保生效,请按照LVHA的顺序声明
/*平时最最常用的方法*/
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#369;
text-decoration:underline;
}
:focus伪类选择器用于选择获取焦点的表单元素
焦点就是光标,一般情况下input类表单元素才能获取
input:focus{
background-color:yellow
}
块元素
h1-h6,p div ,ul,li,ol等,其中div标签是最典型的块元素
特点:
1、比较霸道,自己独占一行;
2、高度、宽度、外边距以及内边距都可以控制;
3、宽度默认是容器(父级宽度)的100%;
4、是一个容器盒子,里面可以放行内或者块元素;
注意:文字类的元素不能使用块级元素,p标签主要用于存放文字,不能存放块级元素div,同理,h1-h6也不能存放块级元素;
行内元素
<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。
<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。
<del>二十</del> :删除线
<ins>十二</ins>:下划线
行内块元素
元素显示模式的转换
特殊情况下,我们需要元素模式的转换。简单理解:一个模式的元素需要另外一种模式的特性,比如想要增加链接<a>的触发范围;
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block;
小工具snipaste截图使用
垂直居中:文字的行高=盒子的高度;
关于背景
缩写:
背景图像滚动
background-attachment: scroll|fixed
scroll:背景图像随内容滚动
fixed:背景图像固定
背景图像半透明
background:rgba(0,0,0,0.3)
最后一个参数是alpha的透明度,取值范围在0-1之间 0看不见,1纯黑色;
css优先级问题
选择器 | 选择器权重 |
继承或者是* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style | 1,0,0,0 |
! important | 无穷大 |
关于继承的权重问题:
如果该元素没有被选中,不管父元素权重有多高,子元素得到的权重都是0;
也就是说与父元素相同的属性继承没有用,主要看子元素的定义;
关于盒子模型
盒子模型本质上就是一个盒子,封装周围的HTML元素,包括边框、外边距、内边距、实际内容;
/*定义没有顺序*/
borde:1px solid red;
还有border-top等;
合并相邻的边框:border-collapse:collapse;
内边距
值 | 意义 |
padding:5px; | 1一个值,代表上下左右都有5像素的内边距 |
padding:5px 10px; | 2个值,代表上下内边距是5px,左右内边距是10px |
padding:5px 10px 20px | 3个值,代表上内边距是5像素,左右内监局是10像素,下内边距20像素 |
padding:5px 10px 20px 30px | 4个值,代表上、右、下,左的内边距 |
当我们给盒子指定了padding之后,发生了两件事情:
1、内容和边距有了距离,添加了内边距;
2、padding内边距实际上影响了盒子的大小;也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
根据是否有高度或是宽度,判断是否用margin还是用padding;因为padding会撑大盒子模型;
盒子阴影
css3中新增了盒子阴影,可以使用box-shadow属性为盒子添加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:必需。水平阴影的位置,允许负值;
v-shadow:必需。垂直阴影的位置。允许负值;
blur:可选。模糊距离;
spread:可选。阴影的尺寸;
color:可选。阴影的颜色
inset:可选。将外部阴影改为内部阴影。默认就是外部阴影,但是外部阴影outset不能写;
阴影盒子不占空间,不会影响其他盒子排列。
文字阴影
text-shadow:h-shadow v-shadow blur color;
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。