CSS
-
概述:是一种用来表现HTML或XML等文件样式的计算机语言
-
层叠式样式表
-
CSS可以用来修饰美化页面
-
CSS可以配合脚本语言动态地对网页各元素进型格式化
-
内容与表现分离,页面外观的维护更加容易
-
CSS基本语法
-
CSS规则由两个主要的部分组成:选择器以及一条或多天声明
-
选择器通常是需要改变样式的HTML元素
-
每条声明由一个属性和一个值组成
-
CSS导入方式
-
内联方式
-
将css样式嵌入到HTML标签中,类似属性的用法
-
<h1 style="background-color: pink">望庐山瀑布</h1>
-
-
内部方式
-
在head标签中使用style标签引入css
-
<style type="text/css"> p{ font-size: 20px; color: orange; } </style>
-
-
外部导入
-
将css样式抽成一个单独.css文件,使用link标签引入或者@import导入
-
link标签
-
<link href="02css.css" rel="stylesheet">
-
ref:代表当前页面与href所指定文档的关系
-
type:文件类型,告诉浏览器使用css解析器去解析
-
href:css文件地址
-
-
@import方式
-
@import "02css.css";
-
-
link和@import方式的区别
-
linke所有浏览器都支持,@import某些版本低的IE不支持
-
@import是等待HTML加载完成才加载
-
@import不支持js动态修改
-
-
-
优先级:内联>内部和外部(内部和外部遵循就近原则)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS使用方式</title> <!--关联外部css--> <!--链接式【推荐使用】--> <link href="02css.css" rel="stylesheet"> <!--导入式【不推荐使用】--> <!-- <style type="text/css">--> <!-- @import "02css.css";--> <!-- </style>--> <style type="text/css"> p{ font-size: 20px; color: orange; } </style> </head> <body> <h2>css使用方式</h2> <ul> <li>内联样式:将样式写在标签中,适合对某一个元素样式进行控制</li> <li>内部样式:将样式写在head的style标签中,适合对同一个页面中一类元素进行控制。内联样式的优先级大于内部样式。就近原则</li> <li>外部样式:将样式写入到独立的css文件中.适合多个页面共用一个样式</li> <li>优先级:内联大于内部和外部,内部和外部遵循就近原则</li> </ul> <h1 style="background-color: pink">望庐山瀑布</h1> <p style="color: skyblue">日照香炉生紫烟</p> <p style="color: gold">遥看瀑布挂前川</p> <p>飞流直下三千尺</p> <p>疑是银河落九天</p> <div> 作者李白,描述庐山的诗句。 </div> </body> </html>
基本选择器
-
选择器:用于选择需要添加样式的HTML元素
-
标签选择器
-
使用html标签作为选择器
-
语法:标签{属性:属性值;.....}
-
-
id选择器
-
给需要修改样式的HTML元素添加id属性表示
-
语法:#id{属性:属性值;......}
-
-
class选择器
-
给需要修改样式的HTML元素添加class属性表示
-
语法:.class{属性:属性值;....}
-
-
优先级:id选择器>class选择器>标签选择器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> /*标签选择器*/ p{ color: black; } /*id选择器,尽量不要重复*/ #p1{ background-color: gold; } /*class选择器*/ .class1{ background-color: pink; } .class2{ font-size: 20px; } </style> <title>CSS基本选择器</title> </head> <body> <h1>css基本选择器</h1> <ul> <li>标签选择器:使用HTML标签作为选择器</li> <li>id选择器:需要为添加样式的HTML元素添加id标识</li> <li>.class选择器:为需要添加样式的HTML元素添加class标识</li> <li>优先级:id选择器 大于 class选择器 大于 标签选择器</li> </ul> <h2>春晓</h2> <p class="class1 class2">作者:孟浩然</p> <p id="p1">春眠不觉晓</p> <p class="class1 class2">处处闻啼鸟</p> <p class="class1">夜来风雨声</p> <p>花落知多少</p> </body> </html>
属性、伪类、层级选择器
-
属性选择器
-
根据元素的属性以及属性值选择元素
-
语法:标签[属性=属性值]{属性:属性值}
-
-
伪类选择器:
-
css伪类用于向某些选择器添加特殊的效果
-
语法:标签:伪类{属性:属性值;....}
-
-
层级选择器
-
后代选择器: 语法:父级 子级{属性:属性值;...}
-
子代选择器, 语法: 父级>子级{属性:属性值;...}
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> /*属性选择器*/ input[type='text']{ background-color: lightgray; } input[type]{/*所有input标签*/ background-color: pink; } /* ^=以某个属性开头 $= 以某个属性结尾 *= 包含某个属性值 */ input[type^='pass']{ background-color: blue; } /*伪类选择器:给超链接标签添加状态属性*/ /*超链接四种状态: link 超链接初始状态 visited 访问过状态 hover 鼠标经过状态 active 鼠标激活状态*/ /*四个状态同时设置*/ a{ color: black; text-decoration: none; } a:hover{ text-decoration: underline;/*下划线*/ cursor: default;/*光标*/ } li:first-child{/*第一个元素样式*/ color: red; } /*层级选择器*/ /*后代:包括所有子代元素,儿子、孙子*/ /*子代:只包括儿子元素*/ #div1>span{/*子代*/ color: red; } #div1 span{/*空格 后代*/ font-size: 20px; } </style> <title>其他选择器</title> </head> <body> <h1>css其他选择器</h1> <ul> <li>属性选择器:使用属性作为选择器</li> <li>伪类选择器:添加特殊样式</li> <li>层级选择器:包括后代、子代</li> </ul> <form action="" method="post"> <table> <tr> <td>用户名</td> <td> <input name="username" type="text"> </td> </tr> <tr> <td>密码</td> <td> <input name="pwd" type="password"> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> <a href="http://www.baidu.com"> 跳转到百度</a> <div id="div1"> <span>span1</span> <p> <span>span2</span> </p> </div> </body> </html>
文本属性
属性名 | 取值 | 描述 |
---|---|---|
font-size | 数值 | 设置字体大小 |
font-family | 字体 | 设置字体类型 |
font-style | normal正常;italic斜体 | 设置字体样式(斜体) |
font-wight | 100-900数值,bold(加粗) | 设置字体粗细 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> p{ /*px像素 (默认16px) em 表示字体大小多少倍*/ font-size: 30px; /*font-family:字体类型(默认:微软雅黑)*/ font-family: "隶书"; /*font-style:字体类型*/ font-style: italic;/*斜体*/ /*font-weight:字体粗细*/ font-weight: bold;/*加粗*/ /*简写 s (style)w(weight) s(size) f(family)*/ } </style> <title>字体属性</title> </head> <body> <h1>字体属性</h1> <ul> <li>font-size:设置字体的大小</li> <li>font-family:设置字体的类型</li> <li>font-style:设置字体的样式</li> <li>font-weight:设置字体的粗细</li> </ul> <h2>春晓</h2> <p>作者:孟浩然</p> <p>春眠不觉晓</p> <p >处处闻啼鸟</p> <p >夜来风雨声</p> <p>花落知多少</p> </body> </html>
文本属性
属性 | 取值 | 描述 |
---|---|---|
color | 十六进制或表示颜色的英文单词 | 设置文本颜色 |
text-indent | 2em(em=16px,默认字体大小16px) | 缩进元素中文本的首行 |
text-decoration | underline;overline;line-through:删除线 | 文本的装饰线 |
text-align | left、right、center | 文本说平对齐方式 |
line-height | normal、固定值 | 设置文本的行高 |
text-shadow | 水平偏移、垂直偏移、模糊距离、阴影颜色 | 设置阴影及模糊效果 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> p{ /*文本颜色*/ color: green; } p{ /*文本缩进*/ text-indent: 2em; } p{ /*文本修饰*/ /*underline;下划线 overline:上划线 line-through:删除线 none:无*/ text-decoration: underline; } p{ /*文本对齐*/ text-align: center; } p{ /*文本行高*/ line-height: 2em; } p{ /*文本阴影 10px:左右移动,正数向右 10px:上下移动,正数向下 5px:阴影大小(距离) blue:阴影颜色*/ text-shadow: 10px 10px 5px blue ; } </style> <title>文本属性</title> </head> <body> <h1>文本属性</h1> <ul> <li>color:文字的颜色<li> <li>text-indent:文本的缩进</li> <li></li> <li></li> <li></li> <li></li> </ul> <h2>春晓</h2> <p>作者:孟浩然</p> <p>春眠不觉晓</p> <p >处处闻啼鸟</p> <p >夜来风雨声</p> </body> </html>
背景属性
属性 | 取值 | 描述 |
---|---|---|
background-color | 表示颜色的英语单词或RGB模式 | 设置背景色 |
background-image | url('图片路径') | 设置背景图片 |
background-repeat | repeat-y;repeat-x;repeat;no-repeat; | 背景图的平铺方向 |
background-position | top;buttom;left;right;center | 文本水平对齐方式 |