前端学习路漫漫,笔记坚持写下去。
01CSS选择器
CSS选择器:标签(元素)选择器,id选择器,class选择器,子元素选择器,相邻选择器,群组选择器
选择器就是用一种自己想要的方式选中目标元素,选择器的语法规范如下
选择器{样式属性1:取值1
样式属性1:取值2
……
}
标签(元素)选择器
元素选择器选择的是相同的元素,统一修改元素的CSS样式
2.id选择器
id名前面必须加上一个“#”,表明这是一个id选择器
3.class选择器
class名前必须加上前缀“.”(英文符号),否则此选择器无效,类名前加上“.”,表明这是一个class选择器。
4.子元素选择器
父元素与子元素之间必须用空格隔开,#father#p1{...},表示选择”id为father的元素“下所有元素id为p1的元素。
5.相邻选择器
语法为#lv+div{...},表示选择”id为lv的元素“的相邻的下一个元素div,操作对象是lv的同级元素。
6.群组选择器
语法为选择器1,选择器2,选择器3{属性:属性值;}。选择器之间用”,“(英文逗号隔开)。
02CSS样式表
在HTML中,引入CSS共有三种方式
外部样式表
最理想的CSS引入方式,外部样式表在单独文件中定义,并且在head/head标签中使用link标签来使用(linkhref="css存储路径"rel="stylesheet")如图
2.内部样式表
内部样式,就是把HTML和CSS代码放在同一个文件中,其中CSS代码放在style/style标签对内,如图
3.内联样式表
HTML和CSS代码放在同一个文件中,但跟内部样式表不同的是,CSS样式不是在style/style标签对中定义,而是在标签的style属性中定义。
03字体样式、文本样式
举例语法书写如下
.gray{
color:#;
font-size:12px;
text-align:center;
font-weight:;/*font-weight:后没有px*/
......
}
04总结
经过上面的学习,以及字体样式文本样式的运用,自己仿写了一套新闻页面,如图
最后的最后,坚持学习下去,你能行,每天一项学习笔记。