马倩媛-20201028
1 标签选择器:选择器名称与HTML标签相同;凡是和选择器名称一样的HTML标签都适用这个样式
格式:选择器名称(标签名){
;
}
div{
width: 100px;
height: 200px;
background-color: yellow;
}
<div></div>
<div></div>
<div></div>
2 id选择器:在选择器名称前面加#
3 类选择器
格式:.box{
}
.box:hover{
}
4 通用选择器(适用于所有标签)
格式:*{
background:gold;
}
5 后代选择器:在后代选择器中,空格代表后代
格式:.box ul li{
color:green
}
6 伪类选择器(鼠标悬停状态)
a:hover{
text-decoration:none
}
选择器的优先级
相同属性下:后代选择器> id选择器 > 标签选择器
text-align:center;/*对齐方式*/
text-align:left;左对齐
line-height:200px;/*行高*/
text-decoration:under-line;/*文本划线*/
text-shadow:2px 2px 3px yellow;/*字体阴影*/
text-indent:2em(相对单位);/*首行缩进*/
(修饰背景的常用样式)
<div class="box">
background-size:cover;/*背景图片的大小*/
background-repeat:repeat-x;/*背景图片平铺*/
background-attachment:fixed;/*背景图片固定*/
background-position:-100px 0;/*背景图片平移*/
(颜色的表示方法)
<style>
span{
color:#00ff00;/rgb(255,0,0,0-255)
}
</style>
opacity:0.5;/*透明度*/
background-color:transparent;/*背景全透明*/
学习心得:
在今天的实训中主要讲了一下字体的常用样式和背景的常用样式,怎么去正确的输入和显示,提高了自己动手操作
的能力。
近期评论