黑马程序员Web前端入门教程，零基础前端视频教程pink老师_html5+css3
文章目录
html局限性css简介（层叠样式表、级联样式表、css样式表）css语法规范css代码样式风格（推荐用展开式风格）（都用小写）（注意空格）css选择器选择器分类标签选择器（语法、优缺点）（指定标签）类选择器class（语法、注意事项） 利用类选择器画三个盒子（div）css单标签多类名的使用方法id选择器通配符选择器 *css字体属性font-family font-size（字体大小） font-weight（字体粗细）字体样式font-stylecss字体属性之复合属性（节约代码量）字体属性总结css文本属性文本颜色color对齐文本text-align装饰文本text-decoration（下划线、删除线、上划线）取消a标签（链接）的下划线文本缩进text-indent（em中文字符单位）行间距 line-height css文本属性总结css引入方式（行内式、嵌入式、链接式）行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）（link rel="stylesheet" href=）html局限性
css简介（层叠样式表、级联样式表、css样式表）
css语法规范
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 12px;}</style></head><body><p>我是红色的</p></body></html>
css代码样式风格（推荐用展开式风格）（都用小写）（注意空格）
css选择器
选择器分类
标签选择器（语法、优缺点）（指定标签）
类选择器class（语法、注意事项）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;}.green {color: green;}</style></head><body><ul class="red"><li class="red">小艾</li><li class="green">小绿</li><li>小鹤</li><li>小坡</li><li>小惠</li></ul><div class="red">我也想变红色</div></body></html>
利用类选择器画三个盒子（div）
/video/BV1pE411q7FU?p=67&spm_id_from=pageDriver
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {width: 120px;height: 240px;background-color: red;}.green {width: 120px;height: 240px;background-color: green;}.blue {width: 120px;height: 240px;background-color: blue;}</style></head><body><div class="red">我是红色的</div><div class="green">我是绿色的</div><div class="blue">我是蓝色的</div></body></html>
css单标签多类名的使用方法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 99px;height: 240px;font-size: 35px;}.red {background-color: red;}.green {background-color: green;}.blue {background-color: blue;}</style></head><body><div class="red box">我是红色的</div><div class="green box">我是绿色的</div><div class="blue box">我是蓝色的</div></body></html>
id选择器
通配符选择器 *
css字体属性font-family font-size（字体大小） font-weight（字体粗细）
写多个字体的话，浏览器会从第一个开始一个一个往下找，安装了哪个就用哪个
字体样式font-style
css字体属性之复合属性（节约代码量）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font:italic 700 16px 'Microsoft yahei'/* font:italic 700 16px '黑体' */}</style></head><body><div>我是红色的</div></body></html>
字体属性总结
css文本属性
文本颜色color
通常用16进制表达方式，一般通过ps吸取过来，不需要记
对齐文本text-align
装饰文本text-decoration（下划线、删除线、上划线）取消a标签（链接）的下划线
文本缩进text-indent（em中文字符单位）
行间距 line-height
css文本属性总结
css引入方式（行内式、嵌入式、链接式）
行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）（link rel=“stylesheet” href=）
示例：
test.html
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="style.css"></head><body><h4>你最喜欢吃的食物是？</h4><ul><li>西红柿</li><li>香蕉</li><li>榴莲</li><li><p>123</p><p>456</p></li></ul></body></html>
style.css
ul {color: rebeccapurple;}
/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver
