CSS的基本使用
内联(行内)样式:inline style
-
使用 style=“属性名:属性值; 属性名:属性值;”
<h1 style="font-size:50px;color:red;">网页的标题</h1>
文档样式表:document style sheet
-
选择器 {属性名:属性值;}
开发网页特性:结构和样式分离
<style> h1,p { font-size:50px; color:red; } </style>
-
选择器:
-
统配选择器:*
<style> * { color: red; } </style>
-
元素选择器(标签选择器)type selectors:
<style> div { color: red; } p { color: green; } </style>
-
类选择器:
<style> .box1 { color: red; } .box2 { color:blue; } .large-font { font-size:25px; } </style> <body> <!---一个元素可以有多个类,多个类以空格进行分割 --> <div class="box1 large-font">文字内容1</div> <p class="box2">文字内容2</p> </body>
-
id选择器
<style> #header { color: red; } #content { color: green; } #footer { color:blue; } </style> <dody> <div id="header">头部</div> <div id="content">内容</div> <div id="footer">尾部</div> </dody>
强调:id用于整体布局划分,id名称同一个页面中不要重复(代码规范)
-
属性选择器(不常使用)
<style> /*渲染属性为title的元素*/ [title] { color:#f00; } /*渲染属性值为 one div元素 的元素*/ [title="one div元素"] { font-size: 25px; } /*渲染title中包含one单词*/ /*[title*="one"] */ /*title以one开头*/ /*[title^="one"] */ /*title以one结尾*/ /*[title$="one"]*/ </style> <body> <div title="one div元素">我是div元素</div> <p title="p元素">我是p元素</p> <p title="p one">我是p元素</p> <p>我也是P元素</p> <span title="one span元素">我是span元素</span> </body>
-
后代选择器:
div p span { color:red; }
渲染div元素嵌套的p元素下面的span元素
-
子代选择器:
div>span { color:red; }
渲染div元素里面的直接span子元素(不包含间接子元素)
-
相邻兄弟选择器
div+p { color: red; }
div元素后面紧挨着的p元素(且div、p元素必须是兄弟关系)
-
全体兄弟选择器
div~p { color: red; }
div元素后面的p元素(且div、p元素必须是兄弟关系)
-
交集选择器
div.one { color: red; }
同时符合2个条件的元素:div元素、class值是one
-
并集选择器
div, .one, [title="text"] { color:red; }
只要满足其中一个条件就会被渲染
-
-
外部样式表:external style sheet
-
当使用样式过多时,将所有样式放入一个后缀名为.css的文件,然后在html文档中引入即可
-
当样式中涉及中文时:在css文件中加入 @charset “utf-8”;
-
在html文件中引用:
通过link引入
-
<link rel="stylesheet" href="css文档的路径">
link元素除了可以用来引入CSS文件,还可以设置网页的图标(href的值是图表链接)
<link rel="icon" type="image/x-icon" href="http://www.jd.com/favicon.ico">
- link元素的rel属性不能省略,用来指定文档与链接资源的关系
- 一般rel若确定,相应的type也会默认确定,所以可以省略type
- 网页图标支持的图片格式是ico、png,常用大小是16x16、24x24、32x32(单位:像素)
通过@import引入
-
<style> @import url(css文档路径) </style>
-
-