弹簧机 东莞网站建设成都大型网站设计公司
目录
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使用调试工具
