Day-2
注:
(1)浏览器遍历父子选择器的顺序是从树的子节点到根节点(从右向左)
(2)权重一样时,后面的CSS代码会覆盖前面的
(3)任何软件设置字体大小时都是设置高
(4)凡是带有inline的元素,都带有文字特性,例如:若不进行任何设置,4 张图并排放置,就会有空隙,相当于俩个字之间的字间距,产生原因img为行级块元素(inline-block)带有inline。解决方式见下。
(5)<body>
有天生的margin为8px
(6)选择优先级:
!important > 行间样式 > id > class属性 > 标签选择器
(7)W3C联盟 推崇前端在开发时, 尽可能做到:
结构(HTML), 样式(CSS), 行为(JS)三者相分离
(8)id和class的命名规则:
1. 数字不能开头
2. 名字由字母, 数字, 下划线组成, 汉字(不建议)
3. 见名知意(规范)
CSS导入方式
**
(1)行间CSS样式
行间css样式的缺点: 代码耦合度高, 没有做到结构(HTML), 样式(CSS), 行为(JS)
三者相分离
行间css样式的优点: 优先级比较高, 针对性较强
<body>
<div style="width:10px;height:100px;background-color:red;">
</div>
</body>
(2) 内联CSS样式
优点: 符合W3C的编码理念
缺点: 公共样式无法抽离
问题: 样式没有针对性了, 不知道设置的样式是给哪个html标签设置的
解决办法:
1. 先找到要设置样式的html标签 (通过css选择器找到html标签)
2. 找到之后再书写css样式代码
<head>
<style type="text/css">
</style>
</head>
(3) 外联CSS样式
两种方法:
1. 通过link标签引入外部css文件
2. 通过style标签, 并在内部书写@import方式引入外部css文件
区别:
1. link是HTML语法, @import是CSS语法
2. link除了可以引入css文件之外, 还可以引入其他类型的文件;
@import只能引入css文件.
3. 当一个网页加载时, link引入的css文件会同时被加载;
@import要等到页面全部加载完毕之后才会开始加载css文件
4. 使用link引入的css样式将来可以被JS修改;
@import引入的JS不可修改.
优点:
完全符合W3C的编码理念
抽离公共的样式, 提高编码质量.
缺点:
新建一个文件
<head>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
CSS权重(256进制)
**
CSS选择器
**
- 通配符选择器
*{
包含所有的东西
}
- ID选择器
#id{
# + id值
}
- 类名选择器
.class{
. + class值
}
- 属性选择器
[属性]{
}
- 并列选择器
多个限制条件写到一起并且中间不加空格
div.demo{
}
- 分组选择器
逗号分割,同组共用一个代码框, 用于多个没有其他关系的标签
em,strong,span{
}
- 父子选择器/派生选择器
.sex .box em{
用于有父子关系或者爷孙关系或者更进一步的关系
}
- 直接子元素选择器
div > em{
}
CSS代码
**
-
font-size 字体大小
单位px -
font-weight 字体粗细设置
可能的值: -
font-style 定义字体样式
italic(斜体) -
font-family 字体种类
互联网通用:arial -
color 字体颜色
三类:
(1) 纯英文 例:color:green;
(2) 颜色代码 例:color: #ff4400;
俩位代表一个颜色的饱和度,16进制代码,00~ff 分别为红,绿,蓝三色的饱和度。如果每俩色都重复,可缩写为三位,比如#f40 淘宝红
(3) 颜色函数 例:color:rgb(255,255,255);
-
border:1px solid black; 边框复合属性
/border-width border-style border-color/
border-width: 边框粗细
border-style: 边框样式 solid(实体) dotted(点状虚线)dashed(条状虚线)
border-color: 边框颜色
border-left-color/border-top/border-right/border-bottom: 可分别设置四面的边框 -
wdith,height 容器宽高
单位px -
transparent 透明色(底色为啥显示啥色儿)
例:border-left-color:transparent;
-
text-align 文本对齐方式
center,left,right -
line-height 单行文本所占高度
注:单行文本垂直居中,让容器高度等于单行文本占高度 -
text-indent 文本首行缩进
单位:1em 相对单位(px也是相对单位)等于 1-font-size ,一个字的宽度 -
text-decoration 文本装饰
none(默认)
blink(闪烁)
underline(下划线)
line-through(贯穿线)类似于删除线
overline (上划线) -
cursor 鼠标光标显示类型
- -
伪类选择器之一
a:hover{
background-color:orange;`
}
效果:鼠标移到链接领域内时,链接背景变为橙色
- display 改变元素种类(行,块,行级块)
div{
display:inline;
}
这样div就变为了行级元素
- margin 元素之间的空隙
img{
margin-left:-5px;
}
俩图片之间的空隙变为-5px
- border-radius 圆角
总结
**
1. 行级元素,(内联元素 inline)
feature: 内容决定元素所占位置 ;不可以通过css改变宽高;不独占一行;不支持垂直方向的margin和padding
eg:span ; strong ; em ; a ; del ;
2. 块级元素 (block)
feature: 独占一行 ;可以通过css改变宽高
div ; p ; ul ; li ; ol ; from ; address;h
3. 行级块元素(inline-block)
feature:内容决定大小 ; 可以改变宽高
img ;input
盒子模型
**
- 组成
外边距 margin
盒子壁 border
内边距 padding
盒子内容 width+height(content)
层模型
**
- position 用于层的绝对定位
左右或者上下不可同时设置
div{
positon:absolute;
left:100px
top:100px
}
注:absolute 脱离原来位置进行第定位,相对于最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位。
- relative 用于层的相对定位
div{
positon:relative;
left:100px
top:100px
}
注:保留原来位置进行定位,只相对于自己原来的位置进行定位
-
fixed 固定定位
悬浮广告 -
z-index z轴 定位层
div{
z-index:1;
}