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 | 文本水平对齐方式 |
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
