辽宁网站建设论坛seo推广优化平台
目录
1.CSS简历
2.CSS 基础选择器
2.1标签选择器
2.2类选择器
2.3 id选择器
2.4通配符选择器
2.5总结
3.CSS字体属性
字体属性总结
4.CSS文本属性
4.1颜色
4.2对齐文本
4.3装饰文本
4.4文本缩进
4.5行间距
4.6文本属性总结
5.CSS的引入方式
5.1内部样式表
5.2行内样式表
5.3外部样式表
7.Chrome调试工具
7.1打开调试工具
7.2使用调试工具
1.CSS简历
网页美容师，也是一种标记语言
作用：选择标签+设置这些标签的样式
书写位置在head标签间，在style标签间书写想要的样式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS语法规范</title><style>/* 选择器 {样式}给谁改样式 {改什么样式} */p {color: red;font-size: 12px;/* 修改了文字大小为12像素 */}</style>
</head>推荐代码风格：
1.展开格式
2.小写字母
3.空格规范：选择器（标签）和大括号中间保留空格；属性值前面，冒号后面，保留一个空格
2.CSS 基础选择器
2.1标签选择器
2.2类选择器
2.3 id选择器
2.4通配符选择器
2.5总结
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 标签选择器 */p {color: blue;}/* 类选择器: 样式点定义，结构类(class)调用，一个或多个，开发最常用*/.red {color: red;}.box {width: 100px;height: 100px;font-size: 30px;}.green {background-color: green;}.pink {background-color: pink;}/* id选择器:样式#定义，结构id调用，只能调用一次，别人切勿使用 */#pink {color: pink;}/* 把html body div span li等等标签都更改了 */* {margin: 0;padding: 0;}</style>
</head><body><p>男</p><p>男</p><ul><li class="red">桃花</li><li>蔷薇</li></ul><div class="box green">绿色</div><div class="box pink">粉色</div><div id="pink">id选择器</div>
</body></html>3.CSS字体属性
字体属性总结
<style>body {font-family: 'Microsoft yahei', Arial, Helvetica;font-size: 16px;font-weight: 700;/* 700后不跟单位，等价于bold,400等价于normal,提倡用数字 */font-style: normal;/* 复合属性：简写的方式 font: italic 700 16px 'Microsoft yahei'; */}/* 标题标签比较特殊，需要单独指定文字大小 */h2 {font-size: 16px;}</style>4.CSS文本属性
4.1颜色
4.2对齐文本
4.3装饰文本
4.4文本缩进
4.5行间距
4.6文本属性总结
<style>h1 {text-align: center;}div {color: deeppink;text-decoration: line-through;}a {/* 取消a默认的下划线 */text-decoration: none;}p {text-indent: 2em;}</style>5.CSS的引入方式
5.1内部样式表
5.2行内样式表
5.3外部样式表
6.综合案例
7.Chrome调试工具
7.1打开调试工具
打开Chrome浏览器，按下F2键或者右击页面空白处再点击检查。
7.2使用调试工具
