前端基础02——CSS

发表于 | 分类于 >
本文字数： 2.9k | 阅读时长 ≈ 3 分钟

一、互联网前端开发三层

技术 说明 作用
HTML 超文本标记语言 从语义的角度描述页面结构
CSS 层叠式样式表 从审美的角度负责页面样式
JS JavaScript 从交互的角度描述页面行为

二、常见属性

属性 设置 sublime快捷键
颜色 color:red; c
字号大小 font-size:40px; fsize
背景颜色 background-color:blue; bgc
加粗 font-weight:bold;(加粗)
font-weight:normal;(正常)		 fwb / fwn
斜体 font-style:italic(normal); fos
下划线 text-decoration:underline(none);
（decoration：装饰）		 td

三、基础选择器

1
2
3
4
5
6
7
8
9
/*标签选择器*/
ul{
    background-color:pink;
}

/*id选择器*/
#head{
    color:red;
}

四、类选择器

一个标签可以属于多个类！

要使用原子类！

1
2
3
4
5
6
7
8
/*类选择器*/
.important{
    text-decoration:underline;
}

.special{
    color:red;
}
1
2
<!-- 属于多个类 -->
<p class="important special">xxx</p>

id选择器与类选择器的取舍

类上样式，id上行为

提示：一般来说，CSS使用类选择器（class），id给JS使用，减少共用情况

五、后代选择器

后代选择器选择的是“后代”，而非“儿子”，包含即可！

1
2
3
4
5
6
7
.div1 p{
    color:red;
}

.div2 li2 p{
    color:blue;
}

六、交集选择器

特点：没有空格，可以多个交集

常用：标签名 + 类名

1
2
3
h3.special{
    color:red;
}

七、并集选择器

1
2
3
h3,li{
    color:red;
}

八、通配符选择器

注意：效率不高，页面标签越多效率越低，不建议使用

1
2
3
*{
    color:red;
}

九、一些CSS3选择器

一、儿子选择器（IE7开始兼容）

1
2
3
4
/* 仅作用于儿子，而非后代 */
div>p{
    color:red;
}

二、序选择器（IE8开始兼容）

1
2
3
4
5
6
7
8
9
10
11
ul li:first-child{
    color:red;
}

ul li:nth-child{
    color:yellow;
}

ul li:last-child{
    color:blue;
}

三、下一个兄弟选择器（IE7开始兼容）

1
2
3
4
/*紧跟着的下一个兄弟标签*/
h3+p{
    color:red;
}

十、CSS的继承性和层叠性（重要！）

一、继承性

可继承的属性（文字样式属性）

  1. color
  2. text-开头的
  3. line-开头的
  4. font-开头的

二、层叠性

权重统计方法：（无兼容问题）

  • 数id选择器的数量、类选择器的数量、标签选择器的数量：按位比较大小
  • 如果权重相同，写在后面的有效
  • 注意1：继承得到的样式权重为0（未真实选中）
  • 注意2：实际权重都为0时（即都是通过继承），属性描述更接近目标标签的有效
  • 注意3：若<注意2>的接近程度相同，判断继承权重；权重再相同，判断书写顺序

提示：标签含有多个类名并分别设置样式，和类名顺序无关，仅和CSS顺序相关

提高权重（了解）

1
2
3
4
5
6
/*
1. 提高样式，不提高选择器本身
2. 对继承样式无效*/
div{
    color:red !important;
}

十一、盒子模型（重要！）

宽度和真实占有宽度不同！（需要考虑padding和border）

盒子属性 属性含义
width 宽度（描述内容）
heigth 高度（描述内容）
padding 内边距
border 边框
margin 外边距

（一）认识padding

1、padding区域有背景颜色（CSS2.1下和内容区域相同）

2、padding有方向（空格隔开：上右下左）

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

（二）认识border（上右下左）

属性 效果 全称
粗细 10px border-width
线型 solid：实线
dashed：虚线
dotted：点线
double：双横线
groove：内阴影
inset：内陷
outset：外凸
ridge：垄状边框		 border-style
颜色 默认黑色 border-color

1、样式拆分

  1. border-top-style
  2. border-bottom-color
  3. border-left-width

2、border可以没有

1
2
3
4
div{
    border-left:none;/*法一*/
    border-left-width:0;/*法二*/
}

十二、标准文档流

一、文档流现象

（1）空白折叠现象

1
2
<!-- 要让图片没有缝隙，必须紧密连接 -->
<img src="images/0.jpg"><img src="images/1.jpg"><img src="images/2.jpg">

（2）高矮不齐，底边对齐现象
（3）自动换行现象

二、块级元素和行内元素

（1）块级元素

  • 独占一行（不与其他元素并列）
  • 可以设置宽高
  • 若不设置宽度，默认宽度变为父级元素的100%

（2）行内元素

  • 与其他元素并排
  • 不能设置宽高，默认宽高就是文字宽高

（3）块级元素和行内元素的相互转换

1
2
3
4
5
6
div{
    display:inline;/*显示模式：行内*/
}
span{
    display:block;/*显示模式：块级*/
}

三、脱离标准文档流

（1）浮动（重要！！！）

特性 说明
浮动元素自动脱离标准文档流 任何元素都可以设置宽高
浮动元素自动贴靠 有空间的情况下会自动寻找边
浮动元素有“字围”效果 浮动元素可以遮挡未浮动元素，但不能遮挡文字

（2）绝对定位

（3）固定定位