CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术.
使用CSS可以提高页面浏览速度
CSS和div元素结合更好的控制页面布局
实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中,可以减少未来网页无效的可能
样式规则
CSS样式由样式规则组成,所有的样式规则的语法遵循如下相同的基本格式:
选择器 { 属性1: 值1; 属性2: 值2; … 属性N: 值N; }
一条样式规则由一个选择器和一个或者多个声明组成;
选择器指定规则可作用于HTML文档中哪个或者哪些元素;
声明要用大括号({})括起来。每个声明要用分号(;)结束。
一个属性/值对组成一个声明,属性和值之间用冒号(:)分隔;
如果属性值中包含了空格,那么该值就必须用双引号("")括起来。例如:font-family: “Times New Roman”;
我们还可以指定多个**选择器使用相同的样式定义,选择器之间用逗号分隔开。**例如,如果我们想要把所有标题列标记(从1到6)的文本字体颜色都定义为红色,可以使用如下定义:
h1, h2, h3, h4, h5, h6 { color: red; }
样式规则的位置
外部样式表
不需要style标签
<link rel=“stylesheet” href=“” />
嵌入式样式表
<style type=“text/css”>
p{}
</style>
内联样式
属性名为style
举例:<p style=“”></p>
创建样式规则
每个样式规则分为选择器和规则本身两个部分,选择器用于规则所应用的元素,规则本身则指定格式。
选择器:
元素选择器
类选择器
ID选择器
属性选择器
包含选择器
通配选择器
伪类及伪元素选择器
选择器:
id 选择器 语法 #id{}
class 类选择器 .class{}
tag 标签选择器 标签{ } (元素选择器)
组合选择器 :
p,span{} p 和 span 都有 同样的 样式
后代选择器
div span {} div 的后代 span 都有的格式 (包含选择器)
子代选择器
div > span {} div 的子代 span 才有样式
*通配符 选择器 所有的元素 都有这个样式
伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪对象
:before 或 :after 选择器在被选元素的内容前面插入内容。
使用 content 属性来指定要插入的内容
例子:
<style type=“text/css”>
p:before {content:"台词 :";}
</style>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
属性单位
长度单位
绝对长度值包括cm、mm、in、pt、pc等,绝对长度值最好用于打印输出设备,而在仅仅作为屏幕显示用时,绝对长度值并无多大意义。
相对长度值包括px、em、ex等。相对长度是指元素尺寸相对于浏览器的系统默认值来相应的缩放。
颜色单位
用百分比值来表示,如color:rgb(50%,0,50%) ;
使用0-255之间的整数值来设置,如color:rgb(128,0,128) ;
使用十六进制数组定义颜色,如#fc0eab;
使用简化的十六进制数定义颜色**,如#080;**
为颜色取名:aqua,black,blue,fuchsia,gray,green等。
url单位
URL单位的具体格式是:在“url”后面紧跟一个括号,括号中是url的地址。如果在地址中使用了括号、逗号、空格、单引号和双引号,那么就必须在整个地址的外面加上一对单引号或者双引号。地址可以是相对地址或绝对地址。
例如**:p{ background-image : url(“img/logo.gif”) ; }**
文本属性
背景属性
定位属性
position: relative | absolute | static | fixed
static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative 不脱离文档流,参考自身静态位置,通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed 固定定位,这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级:z-index: auto | number ;
auto 遵从其父对象的定位number 无单位的整数值。可为负数。z-index使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且CSS同意在z-index中使用负数
相对定位
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框
绝对定位
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
布局属性
Display:为None时,其他元素可以占据该元素的位置。
Visibility: 为hidden时,其他元素不能占据该元素的位置。
列表属性
列表属性
<style>
ul{
list-style-type:none;
list-style-image: url(../img/xj.png);
}
</style>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>oracle</li>
<li>javascript</li>
</ul>
</body
CSS盒子模型(box model)
CSS中!important的使用
当有多个相同的选择器时 给了 !important 选择的就是该样式
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
测试Css中的Important
</div>
</body>
CSS中的继承
CSS中,有一些样式是可以继承的,如字体、文本属性。有一些样式是不能继承的,如边框、间距、布局、定位等。