您的位置:首页 > Web前端 > CSS

css基础

2016-06-26 18:03 417 查看

什么是CSS

CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术。

添加样式表的形式

内联式:直接在元素中加入style属性,只能用于网页中的一个元素
《div style="border: 1px solid #000;width: 300px;height: 200px">《/div>
嵌入式:书写style标签,在标签中指明样式,可以用于网页中的不同元素。 《style> div{ width: 300px; height: 200px; background-color: yellow; border: 2px solid #000; } 《/style>
外联式:将样式规则书写到文件中,可以用于不停的网页,重用度最好。
《link rel="stylesheet" href="abc.css">
层叠样式表的含义是:如果有多个规则来描述同一个元素,那么会根据样式表的优先级,来决定最终显示什么样式。
对于导入css方式的优先级:内联式>嵌入式>外联式

CSS选择器

元素选择器:利用元素的标签名称作用选择范围,div{}表示所有div元素均采用该样式。h1,h2{}表示所有的h1标签和h2标签均采用该样式。
类选择器:利用元素的class属性来引入类选择器的样式。 .mm{} 《div class="mm">《/div> 该div采用mm类选择器定义的样式
id选择器 #:让用于该id属性的元素采用该样式《p id="p1">《/p> #p1{}id号为p1的元素采用该样式。
包含选择器:标记元素类的子元素采用该方式。《div id="mydiv">《/div> #mydiv span{} id 号我mydiv元素中所有的span标签采用该样式。div.aa{}表示所有的div中,calss属性为aa的元素采用该样式。
通配符 #:所有的元素均采用该样式。#oneDiv *{}表示id我oneDiv中,所有的元素均采用该样式。
伪类选择器 #:执行完某个动作的元素采用该样式。#data tr:hover{} 表示鼠标悬停在id为data下的tr元素时,采用该样式。
颜色单位:

使用0-255之间的整数值来设置,如color:rgb(128,0,128);
使用十六进制数组定义颜色,如#fcOeab;
为颜色取名:aqua,black,blue,fuchsia,gray,green等

CSS优先级:选择器优先级:!important>id>class>element>伪类>*

!important可以改变css选择器的优先级,加上!important就优先于正常的css规则
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: