黄翔-20201028
HTML 5.0:H5→标签(行级标签,块级标签)
CSS 3.0:层叠样式表→修饰问题
选择器(镜子):精确选中要修饰的标签
<link rel="stylesheet" href="css/style.css" />在html中引用CSS
常用的选择器:1类选择器
格式:.className{
属性:属性值;
属性:属性值;
……
}
2标签选择器
格式:选择器名称(标签名){
属性:属性值;
属性:属性值;
}
3 ID选择器:在选择器名称前面加# (classname可以相同,id不可以)
格式:#id名{
属性:属性值;
属性:属性值;
……
}
4后代选择器:在后代选择器中,空格代表后代
格式:父标签 子标签{
属性:属性值;
属性:属性值;
}
5伪类选择器:
a:link{/*未访问状态*/
color: red;
}
a:hover{/*鼠标悬停状态*/
color: #008000;
}
a:active{/*激活选中状态*/
color: black;
}
a:visited{/*访问过后状态*/
color: #ADFF2F;
}
<a href="#">你点我啊</a>
6通用选择器:
格式:*{
属性:属性值;
属性:属性值;
}
相同属性下:后代选择器(子选择器)> id选择器 > class选择器 > 标签选择器
文本样式
color: pink;/*颜色*/
font-size: 30px; /*字体大小*/
font-family: "楷体"; /*字体*/
font-style: italic; /*字体样式*/
font-weight: bold; /*字体粗细*/
letter-spacing: 5px;/*文字间距*/
text-align: center; /*水平距离*/
line-height: 250px; /*垂直距离*/
text-decoration: none; /*文字线(下划上划删除)*/
text-shadow: 2px 2px 2px greenyellow; /*文字阴影*/
text-indent: 2em; /*首行缩进*/
背景样式
background-color: red; 背景颜色
background-image: url(img/favicon.ico); 背景图片
background-repeat: no-repeat; 设置背景图片不重复
background-size: 268px 272px; 设置背景图片大小
background-size:cover; 设置背景图片充满盒子
background-position: 150px 150px ; 背景图X,y轴方向位移
颜色表示方法
color:#000000
rgb(*,*,*)
rgba(*,*,*,0-1) 最后一位透明度
透明度:opacity: 0.3; /*0,完全透明;1,完全不透明*/
background-color: rgba(215,215,215,0.3);
/*设置div透明,但是里面的内容不透明*/
background-color;transparent;/*背景全透明*/
心得体会:今天重点主要学习了CSS选择器,并学习了一些基础的设置,添加颜色等代码操作。用CSS选择器对html的块进行选择性的修饰,对文字或图片进行修改使其变得更美观。
近期评论