如鹏网 静态Web开发 第二章:css
1、css的定义方式:内联在标签中;写到html文件的style标签中;写到单独的css文件中。
2、css选择器:id选择器;class选择器;派生选择器;子元素选择器;组合选择器;超链接的伪类选择器;
3、选择器的优先级;
4、常用样式:字体颜色;背景;字体大小;
5、margin和padding的区别;
-----------------------------------------------------------------------------------------
课程大纲
CSS概述
CSS选择器
盒子模型
CSS样式
-----------------------------------------------------------------------------------------
CSS概述(级连样式表)
CSS(Cascading Style Sheets),它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
HTML(Hyper Text Markup Language)超文本标记语言,是用来描述页面的一种语言。
没有HTML之前,早期网页都是存文本,没有任何效果,而今天我们打开网站看到的页面都是图文并茂、布局严谨、结构清晰,这就是HTML语言的魅力,让文字会“说话”。
1982年由蒂姆·伯纳斯-李创建,后来进一步发展成为国际标准,由万维网联盟(W3C)维护。
目前最新版本为5.0,支持浏览器IE9+,Chrome25+,Firefox19+...
-----------------------------------------------------------------------------------------
CSS基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector{ declaration1; ... declarationN; }
每条声明由一个属性和一个值组成:h1 { color : red; }
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
提示:请使用花括号来包围声明。
-----------------------------------------------------------------------------------------
CSS定义方式
内联式(最高优先级)
•在标签内通过 style 属性添加样式属性
•<p style="color:red">红色内容</p>
嵌入式
•在<head>标签内放在单独的 style 元素中
•<style> p{ color:red; } </style>
外联式
就是把外部css文件中的内容加到网页中
•将内联样式的内容放到一个独立的.css文件中进行引用
•<link rel="stylesheet" type="text/css" href="*.css"/>
•@import url("*.css"); CSS特有的, 必须写到<style></style>标签中
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
优先级:内联式>嵌入式和外联式(嵌入式和外联式谁在后,最后用谁的设置,以最下面的为准)
-----------------------------------------------------------------------------------------
Css选择器:
基本选择器:
标签名选择器
ID选择器
Class选择器
扩展选择器:
派生选择器
子元素选择器
属性选择器
组合选择器
伪类选择器
......
CSS基本选择器
标签名选择器
h1{color:red;}
id 选择器:唯一性
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例
#para1
{
text-align:center;
color:red;
}
注:ID属性,class属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器(复用性)
在 CSS 中,类选择器以一个"."点号显示:
.center {text-align: center}
在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
注:类名的第一个字符同样不能使用数字!
id 选择器与 class 选择器有很大的不同
一个页面内不能出现相同的ID(唯一的);
再就是ID也是后台开发人员会经常用的,所以前端开发人员应该尽量少的使用。
选择器的优先级
style属性(内联式) > id 选择器 > class 选择器 > 标签选择器
-----------------------------------------------------------------------------------------
CSS扩展选择器
派生选择器
根据上下文选择元素 : h1 em { ... }
直接子元素选择器
对派生选择器进一步过滤,直接子元素 h1 > a { ... }
属性选择器
可以根据元素的属性及属性值来选择元素 a[href] {color : red;}
组合选择器
h1, h2, h3, h4, h5{ color : red; }
伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:a:active 必须被置于 a:hover 之后,才是有效的。
-----------------------------------------------------------------------------------------
CSS样式
背景:CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
背景色:
重复模式:background-repeat:repeat(全重复,默认),repeat-x(水平),repeat-y(垂直),no-repeat(不重复)
背景定位:background-position:center 0 /*x:居中 y:0*/
综合写法:background: url(img/sp141001.jpg) center 0 no-repeat
综合写法:background: url(img/sp141001.jpg) center 0 no-repeat
文本:文本颜色、字符间距,对齐文本,装饰文本,对文本进行缩进
缩进 :text-indent: 2em; /*1em等于当前文本一个字符的像素大小*/
水平对齐 :text-align: center
文本装饰 :text-decoration:underline(下划线) overline(上划线) none
字体:定义文本的字体系列、大小、加粗、风格和变形。
font-family: '楷体'
font-style: italic /*斜体*/
font-variant:small-caps; /*英文字母变形*/
font-weight: 900 ;(bold)加粗
font-size: 25px; 字体大小
font-size: 25px; 字体大小
链接:以不同的方法为链接设置样式。
a:link{}
a:visited{}
a:hover{}
a:active{}
a{text-decoration: none;}
a:hover{text-decoration: underline;color: red;}
列表
ul{
list-style: none;
list-style-type: square;
list-style-image: url(img/nav_sprite_v24.png);
list-style: url(img/li.png) inside;
}
表格
table,th,tr,td{border:#00f 1px solid }
table{border-spacing: 0;border-collapse: collapse;}
td{
width:50px;
height:30px;
padding: 2px;
vertical-align:bottom;
text-align: center
}
轮廓: 绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
{outline-style: dashed}
-----------------------------------------------------------------------------------------
CSS框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
-----------------------------------------------------------------------------------------
padding、margin
padding
属性定义元素边框与元素内容之间的空白区域。
-属性接受长度值或百分比值,但不允许使用负值。
-h1{padding: 10px;} 让h1元素各边都有10px的内边距。
-h1{padding-top: 20px;} 让h1元素距离上边框为10px。
-h1{padding: 10px 0.25em 2ex 20%;} 上-右-下-左
2个值:上下 左右
3个值:上 左右 下
margin
属性定义围绕在元素边框的空白区域 (外边距)。
-属性接受任意长度值、百分比值甚至使用负值。
-百分数是相对于父元素 width计算的。
-margin 还可以指定为auto,值被设置为相对边的值。
-margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不
会出现外边距。但在实际中,浏览器对许多元素已经提供了预定的样
式,比如外边距会在每个段落元素的上面和下面生成“空行”。
margin 属性接受任何长度单位,可以是像素px、英寸in、毫米mm或 em。
-----------------------------------------------------------------------------------------
边框
元素的边框是围绕元素内容和内边距的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜色。
tr{border: 1px solid #333;}
style="cursor: pointer"
就今天,再坚持一下,哪怕会放弃,但至少要过了今天。