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规则
相关文章推荐
- CSS经典权重5道题解析
- 08、css框架与表格
- HTML+CSS
- 浮动元素float的详细内幕
- CSS3入门
- 07、css列表
- CSS样式技巧总结
- 06、css定位与浮动
- css3中translation用法的几点感悟
- js css实现垂直方向自适应的三角提示菜单
- js css实现垂直方向自适应的三角提示菜单
- 面包屑 CSS(合并小图标,减少链接请求数量)
- CSS 清除浮动的方法
- CSS Floating:Floats and Float Shapes-O'Reilly 2016(读书笔记)
- CSS选择器优先级
- 浅析CSS——元素重叠及position定位的z-index顺序
- css选择器概述
- CSS Secret——Backgrounds & Borders
- css reset
- CSS权威指南-line-height缩放因子