css // 基础
css层叠样式表
css可以定义HTML 页面显示的效果。比如:字体的大小,图片的宽高,版面的布局等等
样式 : 给HTML 标签添加需要显示的效果
层叠 :使用不同的添加方式,给同一个HTML 标签添加样式,最后所有的样式都叠加到一起,共同作用域该标签。
注意:css 样式选择器严格区分大小写。属性和属性值不区分大小写。
css 样式引入规则
样式引入优先级 :行内样式 > 内部样式 > 外部样式
1、行内样式表
格式:在HTML 标签内,通过标签的style 属性,来定义css 样式
示例:
1 <p style="color:red; margin-left:20px"> 这是行内样式</p>
缺点:HTML 展示结构,css 显示效果没有分离,可读性差,只在当前标签中有效。
2、内部样式表
格式:将css 代码集中写在html 文档的头部<head>标签体中,并使用<style> 标签定义
在<style>标签中,通过选择器,选择标签,设置样式。
示例:
1 <head> 2 <style type="test/css"> 3 .name{ 4 color:read; 5 margin-lift: 20px 6 } 7 </style> 8 </head> 9 <body> 10 <p class=name> 这是行内标签示例 </p> 11 </body>
优点:在当前页面所有同名的标签都可以使用
缺点:只对当前html 页面有效,不能充分发挥css 代码的重用性
3、外部样式表
格式:外部样式又称链入式,是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表中。
在HTML 页面的<head> 标签中,通过<link> 标签将外部样式表的文件引入到HTML 文档中
1 <!-- 方式三:外部样式 2 rel=“stylesheet” : 固定值,当前文件和引入文件的关系。 3 rel是relationship的缩写 , stylesheet是样式表 4 type="text/css" : 固定值,浏览器解析方式 5 href : 表示css 文件位置。 6 7 --> 8 <head> 9 <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> 10 </head>
选择器
要想将css 样式应用于特定的html 标签,首先需要找到该标签。而在css 中,将这一任务的样式规则被称为选择器。
1、元素选择器(标签选择器)
元素选择器,在W3C中,又称类型选择器。通过元素定位,为该元素设置样式
格式:元素名{属性1:属性值1;属性2:属性值2}
示例:
1 <head> 2 <style type="test/css"> 3 p{ 4 color:read; 5 font-size : 10px 6 } 7 </style> 8 </head> 9 <body> 10 <p> 这是行内标签示例 </p> 11 </body>
优点:所有的html 标签名都可以作为选择器。能快速为页面中同一类型的标签设置统一样式
缺点:不能设计差异化样式
2、id 选择器
id 选择器,在HTML 标签中,添加一个id 属性,根据id 名进行选择,设置要添加的样式
格式:#id名{属性1:属性值1;属性2:属性值2}
示例:
1 <head> 2 <style type="test/css"> 3 #p1{ 4 color:read; 5 font-size : 10px 6} 7 </style> 8 </head> 9 <body> 10 <p id="p1"> 这是行内标签示例 </p> 11 </body>
注意:大多数HTML元素都可以定义id属性,即使在页面中有多个标签使用相同的id 值,也不会报错,但是会影响到JavaScript的页面效果
优点:可以为单独,或相同的id设置相同的样式
3、类选择器
类选择器,即在HTML 标签中添加一个class 属性,根据class 属性进行选择,设置css 样式
格式:. class的属性值{属性1:属性值1;属性2:属性值2}
示例:
1 <head> 2 <style type="test/css"> 3 .c1{ 4 color:read; 5 font-size : 10px 6 } 7 </style> 8 </head> 9 <body> 10 <p id="p1" class=“c1”> 这是行内标签示例 </p> 11 </body>
优点:可以为单独,或相同的class 设置相同的样式
4、属性选择器
属性选择器,通过标签的属性与属性值定位,设置css样式
格式:标签名[标签属性=“标签名”]{属性1:属性值1;属性2:属性值2}
示例:
1 <head> 2 <style type="test/css"> 3 input[type="text"]{ 4 badkground-color:read; 5 font-size : 10px; 6 } 7 input[type="password"]{ 8 badkground-color:yellow; 9 font-size : 10px; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="text"> 15 <input type="password"> 16 </body>
5、后代选择器
后代选择器也称包含选择器,一个标签中包含另一个标签,使用父类和子类标签名定位,设置样式
格式:父类标签名 子类标签名{属性:属性值;属性2:属性值2}
示例:
1 <head> 2 <style type="test/css"> 3 p em{ 4 color:read; 5 font-size : 10px 6 } 7 </style> 8 </head> 9 <body> 10 <p> 父标签 <em>子标签</em> </p> 11 </body>
注意:有关后代选择器有一个容易被忽视的方面,即两个元素之间的层次间隔可以是无限的
例如:
/* ul em 将会选择标记中的的所有的em 元素*/ <head> <style type="test/css"> ul em{ color:red; } </style> </head> <body> <ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item <em>2</em></li> <li>List item 3</li> </ul> </body>
6、伪类选择器
在支持css的浏览器中,链接(超链接)的不同状态都可以以不同的方式显示
这些状态包括 : 已被访问状态,未被访问状态,鼠标悬停状态,鼠标按住的状态
格式:
<head> <style type="text/css"> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 鼠标按住的链接 */ </style> </head> <body> <a> 超链接示例 </a> </body> /* 超链接和class 属性同用示例 */ <head> <style type="text/css"> a.one:link {color: #FF0000} /* 未访问的链接 */ a.one:visited {color: #00FF00} /* 已访问的链接 */ a.one:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a.one:active {color: #0000FF} /* 鼠标按住的链接 */ </style> </head> <body> <a class="one"> 超链接示例 </a> </body>
css 常用样式
1、背景:background-color
1 p {background-color: gray;}
2、字体:
font-size 设置字体大小
1 p {background-color: gray;font-size:60px;}
font-weight 设置字体粗细
font-style 设置字体风格
3、内边距:padding
1 h1 {padding: 10px 0.25em 2ex 20%;} /*顺序: 上,右,下,左*/ 2 3 /*也可以单独设置某一内边框的值*/ 4 h1 { 5 padding-top: 10px; /* 上 */ 6 padding-right: 0.25em; /* 右 */ 7 padding-bottom: 2ex; /* 下 */ 8 padding-left: 20%; /* 左 百分比数值 */ 9 }
4、外边距:margin
auto 自动居中,用来设置左右外边距
1 h1 {margin : 10px 0px 15px 5px;} /*顺序: 上,右,下,左*/ 2 3 /*单独设置某一外边框的值*/ 4 h2 { 5 margin-top: 20px; /* 上 */ 6 margin-right: 30px; /* 右 */ 7 margin-bottom: 30px; /* 下 */ 8 margin-left: 20px; /* 左 */ 9 }
5、边框
1 /* 同时设置边框的,宽度,样式,颜色 */ 2 #divcss5{border:1px solid #00F} 3 4 /* 单独设置边框的样式 */ 5 /* border-top-style //上 6 border-right-style //右 7 border-bottom-style //下 8 border-left-style //左 */ 9 /* 注意:单边属性要放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。 */ 10 p {border-style: solid; border-left-style: none;} 11 12 /*设置边框的宽度 border-width*/ 13 p {border-style: solid; border-width:15px;} 14 /* 设置单边宽度 */ 15 p {border-width: 15px 5px 15px 5px;} 16 p { 17 border-style: solid; 18 border-top-width: 15px; //上 19 border-right-width: 5px; //右 20 border-bottom-width: 15px; //下 21 border-left-width: 5px; //左 22 } 23 24 /*设置边框的颜色 border-color*/ 25 p { 26 border-style: solid; 27 border-color: blue red; 28 } 29 /* border-top-color 30 border-right-color 31 border-bottom-color 32 border-left-color */ 33 /* 要为 h1 元素指定实线黑色边框,而右边框为实线红色,可以这样指定: */ 34 h1 { 35 border-style: solid; 36 border-color: black; 37 border-right-color: red; 38 }
边框样式值如下:
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid : 实线边框(常用)
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
块级标签与行内标签
在HTML 标签中,被分为了不同的类型,一般分为块级元素与行内元素
块级元素: 以区域块方式出现,每个块标签独自占据一整行或多整行,
常见的块级元素有:<div> 、 <h1> 、 <p> 、 <ul> 、 <ol> 等
行内元素: 不必在新的一行开始,同时也不强迫其他元素在新的一行展示
常见的行内元素有: <span> 、 <a> 等
块级,行级相互转换 : 需要使用display进行转换
/*选择器{display:属性值}*/ 属性值: inline:此元素将显示为行内元素(行内元素默认的display属性值) block:此元素将显为块元素(块元素默认的display属性值) none:此元素将被隐藏,不显示,也不占用页面空间。