Django学习笔记3---CSS

什么是CSS

层叠样式表,是用来表示HTML等文件样式的计算机语言，不仅可以静态的修饰网页，还可以配合多种脚本语言动态的对网页各元素进行格式化．CSS可以对网页中元素位置的排版进行像素级精确控制，支持所有的字体字号样式，拥有对网页对象盒模型样式编辑的能力．

CSS的语法

选择器｛属性：值；属性：值；属性：值；｝
选择器一般指的是HTML的标签

注释

/*....*/

使用CSS的方式

(1)内联:
在html中直接写:

<li style="color:#fc0">内联样式(inline style)</li>

(2)内部:

h3{font-size:30px;color:red;}

(3)外部导入:
先把样式写在my.css中,用的时候,直接导入.

<link rel="stylesheet" href="./my.css">

优先级

当样式冲突时候,采用就近原则,是值css属性离被修饰的内容最近的为主.
当没有样式冲突时则采用叠加效果.

CSS常用的选择器

元素,关系,属性,

html选择器

就是使用HTML的标签进行样式控制．

h1{color:red}
li{color:#00ff00}

类选择器

只要li这个标签里面含有class=cc的都采用这个样式

li.cc{color:red}

id选择器

id属性等于hid的标签,采用此样式.

#hid{color:red}

优先级是:id>类>标签>html属性

关联选择器

只有ol中的li才采用这个样式

ol li{color:green;}

组合选择器

h1,h2,h3,h4{font-size:30px}

伪类选择器

a:link{color:red;text-decoration:none}/*未访问的链接*/
a:visited{color:#00FF00;text-decration:none}/*已访问的链接*/
a:hover{color:#ff00ff;text-decration:underline}/*鼠标在链接*/
a:active(color:#0000ff;text-decoration:underline}/*激活链接*/

CSS3的选择器

关系选择器

ul的所有子标签都采用这个样式
ul li{color:red;}
ul的所有直接子标签都采用此样式
ul>li{color:red}
紧邻div的第一个p兄弟标签采用此样式
div+p{color:red;}
div后面的所有兄弟p标签都采用此样式
div~p{color:red}
li[title]{color:red};

伪类（第一个字；第一行；前面是hello，后面是选择器；第一个子标签；最后一个子标签；第四个标签；p标签不带cc属性的；鼠标放上去变红色）


下面是上面的简写，样式写不对不会报错，但是不显示就行了。使用浏览器调试工具。