- 层叠样式表(级联样式表)
- 全称: Cascading Style Sheets
- 主要用来设置网页的样式
- 后缀名: .css
- 注释:/…/
- 编程字体:consolas, monaco, Fira Code,
source code pro, ubuntu mono
用的字体,能分清 1跟l 0跟o - 浏览器默认行为:p标签—-上下16px的外边距
小技巧
快速选择
- 点结尾,按住shift,点击开始处————-快速选中一段内容
- 按住Ctrl+shift,再按住键盘的右键箭头——快速选择一段文本或符号
- 按住Ctrl,再按键盘左右箭头—————-快速移动光标
操作技巧
- ctrl + 箭头—————快速移动光标
- ctrl + shift + 箭头——快速选择一段文本或单词
- 双击———————–快速选择一个单词
- home(PgUp)——–跳到行首
- end(PgDn)———-跳到行尾
CSS内容
1.选择器
- 元素选择器
div------------就是div{ } 选择的是所有的div标签
*通配符---------就是 *{ } 选中所有元素
class----------属性名前加“.”,例如 .yellow-text{ }
----------class命名:多个单词的时候: word1-word2
id-------------属性名前加“#”,例如 #blue-background{ }
- 1
- 2
- 3
- 4
- 5
注意:ID是唯一标识
一个页面中不要有重复的ID,一个ID名只能出现一次
一般不要用ID作为选择器,因为优先级比较高
不要轻易使用 !important
- 1
- 2
- 3
- 4
选择器优先级-----!important > #id选择器 > .class选择器
> 标签选择器div > 通配符*
- 1
- 2
- 关系选择器
后代选择器(空格)----------eg.div a{ }
选中的是div中所有的a标签,不管是子级还是孙子级别的都会被选中
子级选择器(>)-------------eg.div>a{ }
只会选中div的子级a元素,孙子级不会被选中
- 1
- 2
- 3
- 4
2.属性
- 尺寸属性
宽--------width:400px;
高--------height:300px;
文字大小---font-size:25px;
内边距-----padding:35px;
-----padding-left:4px;
边距-------border:1px;
外边距-----margin:25px;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 颜色属性
字体颜色-----color:#0ab;
背景颜色-----background:#0df;
-----background-color:#0df;
-----background-image:url( 路径及图片名 );
- 1
- 2
- 3
- 4
3.HTML中CSS的使用方式
- 内联引入
方式:在元素上加属性style
格式:<属性 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">
</属性>
缺点:与HTML混合在一起,代码不美观;
内联样式一次,只能对一个标签起作用,
如果有多个相同属性样式,需要重复写很多;
可维护性差;
可复用性差。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 内嵌引入
方式:在head里写style标签,style标签中写CSS内容
格式:<style>
选择器{ 属性1:属性值1;属性2:属性值2;属性3:属性值3; }
div{
font-size:20px;
color:#0ab;
}
</style>
缺点:可复用性差
维护性一般
与HTML混在一起,不美观
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 外部引入
方式:将CSS样式内容独立为 .css 文件,在HTML中通过link标签引入
格式:.css文件中
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
.html文件<head>标签中
<link rel="stylesheet" href="css/03.css" />
好处: 将CSS与HTML独立出来,代码整洁
可复用性高
可维护性高
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
link标签的属性:
rel="stylesheet" 告诉浏览器这是一个样式表
href="CSS文件的路径" 链接引入对应的CSS文件
- 1
- 2
- 3
- 4
- 导入(不推荐使用)
方式:@import 导入文件
格式一:<style>
@import url(CSS文件的路径及文件名)
</style>
格式二:在CSS文件中带入其他CSS文件的内容
eg.03.css文件中已经写好内容,在04.css文件中写:
@import url(03.css);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意:如果样式表内容不多,可以使用内嵌的方式,绝大多数情况推荐使用外部引入的方式。
- 1
- 引入方式的优先级
link与style内嵌同时存在,采用“就近原则”,后写的会将先写的覆盖掉;
内联的优先级 要 高于 内嵌 跟 外部引入。
“` - @import与link的区别
link是HTML标签,@import只能在CSS中使用
link会在网页加载时同时加载,而@import需要网页完全载入才能加载
link无兼容问题,@import 是CSS2.1以后加入的,兼容性一般
link可以使用JS脚本控制,而@import不可以 - 掌握重点
四种引入方式分别是什么
各自的优缺点
优先级关系
@import与link的区别
4.盒模型
块级元素如果没有设置宽度,默认就是占满父级元素的宽度,就是100%;
如果没有设置高度,高度是被内容撑开的
学习感想
- 有的东西不是你学了就代表你全会了,就像是CSS里的关系选择器中的后代选择器(空格)和子级选择器(>)以及其他的选择器。
- 有的东西不是只学皮毛就可以,小的注意点往往会影响整体的效果,比如
元素选择器中一般不使用id选择器,再比如不要轻易地使用 !important。 - 三十年河西三十年河东,世界发展太快,尤其是IT行业,更要与时俱进——学新增的,耍旧有的。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36974981/article/details/79111731