正在加载…
请使用更现代的浏览器并启用 JavaScript 以获得最佳浏览体验。
加载论坛时出错,请强制刷新页面重试。
**黑马程序员CSS_01笔记**
wxf333
CSS简介
:
一种标记语言,HTML结构,CSS样式
CSS语法
:
选择器{属性:值;属性:值}
代码风格
:
样式格式 展开式
样式大小写:
小写
空格规范:
在属性值前面,冒号后面,保留一个空格
在选择器和大括号之间保留一个空格
选择器
:
把不同的标签选出来(选对人、做对事)
基础选择器:由单个选择器组成
标签选择器:HTML中的标签名 可以为页面设置统一样式,不能差异化设置
类选择器:样式点定义、结构类(class)调用、一个或多个、开发最常用
多类名:class中可以写多个类名,但是类名之间得用空格隔开
把相同样式置于一个选择器中,以便之后进行统一的修改
ID选择器:样式#定义、结构ID调用、只能调用一次、别人切勿使用(常与js搭配)
(类选择器就好像人的名字,可以重名;ID选择器就是身份证,人人不同)
通配符选择器:CSS中用*表示,表示选择页面所有标签,不需要调用
优先级: ID>CLASS>标签
字体属性
:
font-famliy:
多个单词用“”括住字体、字体之间用逗号隔开。
font-size:
px
font-weight:
normal、bold、lighter、number(100-900可自动调节,不用跟单位)
font-style:
italic normal(让斜体文字不倾斜 em、i) oblique
复合属性:
font: font-style font-weight font-size/line(行高)-height font-family
font: intalic 700 16px/20px ‘Microsoft yahei’
顺序不能乱,不想要的属性可以省略但是必须保留size与family
文本属性
:
color:
十六进制用得最多
text-aligh:
left(默认) right center
text-decoration:
none underline overline line-through
_重点记住如何添加删除下划线 _
text-indent:
px em(em:相对单位,相对当前元素一个文字大小font-size)
line-height:
px 上间距 + 文本高度 +下间距
引入方式
:
内嵌式:
CSS在HTML文档内部,控制当前整个页面,没有实现结构与样式的分离
行内式:
在元素标签内部的style属性中设定CSS样式
链接式:
样式单独写到CSS文件中,之后把CSS文件引入到HTML中
新建一个CSS文件,CSS文件中只有样式没有标签
在HTML中引入<link>标签 在<head>中引入
代码登录后可见
**Chrome调试工具 **:
Elements :
Ctrl + 滚轮 可以调整代码大小
左边是HTML元素结构,右边是CSS样式(可以修改数值或查看元素)
Ctrl + 0 复原浏览器大小
点击元素,右侧没有样式引入,极可能是类名或者样式引入错误
有样式,样式前有黄色感叹号提示,则是样式属性书写错误