黑马程序员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