1.5.2 行内样式表
行内样式表(内联样式表 是在元素标签内部的 style 属性中设定CSS 样式 适合于修改简单样式
<div style="color: red; font-size:12px;">青春不常在,抓紧谈恋爱</div> 复制代码
style其实就是标签的属性,在双引号中间,写法要符合CSS规范,可以控制当前的标签设置样式
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用行内样式表设定CSS,通常也被称为行内式引入
1.5.3外部样式表
实际开发都是外部样式表.适合于样式比较多的情况.核心是样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用
引入外部样式表分为两步:
1.新建一个后缀名为css的样式文件,把所有CSS代码都放入此文件中 2.在HTML页面中,使用标签引入这个文件。<link rel="stylesheet" href="css文件路径">
1.生成标签直接输入标签名按tab键即可 比如 div然后tab键,就可以生成<div></div>
2.如果想要生成多个相同标签 加上就可以了比如div3就可以快速生成3个div
3.如果有父子级关系的标签,可以用>比如u>li就可以了
4.如果有兄弟关系的标签,用+就可以了比如div+p
5.如果生成带有类名或者id名字的,直接写demo或者#twotab键就可以了
6.如果生成的div类名是有顺序的,可以用自增符号$
7.如果想要在生成的标签内部写内容可以用{)表示
CSS的复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
1.1后代选择器(重要)
后代选择器又称为包含选择器 可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在 后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。语法:元素1元素2{样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。 例如:ul li { 样式声明 } /* 选择 ul 里面所有的li标签元素*/
元素1和元素2中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙子等
只要是元素1的后代即可,元素1和元素2可以是任意基础选择器