所在的位置: html >> html发展 >> CSS第一天学习笔记

CSS第一天学习笔记

前端学习路漫漫,笔记坚持写下去。

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总结

经过上面的学习,以及字体样式文本样式的运用,自己仿写了一套新闻页面,如图

最后的最后,坚持学习下去,你能行,每天一项学习笔记。




转载请注明:http://www.aierlanlan.com/tzrz/2815.html

  • 上一篇文章:
  •   
  • 下一篇文章: