一. Emmet语法：提高编写CSS和HTML的速度

快速生成HTML：

.demo$*5将会生成div class="demo1"至"demo5"。

div{emmm}*5将自动生成<div>emmm</div>。

快速生成CSS样式：

每个单词的首字母缩写加内容比如ti20 text-indent:20px;

二. CSS的复合选择器

后代选择器，子选择器，并集选择器，伪类选择器

通过两个或多个基础选择器通过不同方式组合而成。

1. 后代选择器（重要）

可以选择父元素里面的子元素（只要是元素1的后代都可以）。

元素1 元素2 {样式声明}
ol li {color: pink;
}

2. 子选择器（重要）

选择某元素的最近一级子元素（亲儿子）

元素1 > 元素2 {样式声明}
div > p {    color: red;
}

3. 并集选择器（重要）

选择多组标签，为他们定义相同的样式。

标签1, 标签2{样式
}
div, p{color: pink;
}

最后一个基础选择器后面不需要加逗号。

4. 伪类选择器

链接伪类选择器：用于向某些选择器添加特殊的效果，比如选择第一个和第n个元素。

注意点：

（1）为确保生效，按照顺序声明link visited hover active。love hate

（2）链接具有默认样式，需要单独给样式

开发中一般写做

a {color: black;text-decoration: none;
}
a:hover{color: skyblue;text-decoration: underline;
}

focus伪类选择器：用于选取获得焦点（光标）的表单元素

input:focus {background-color: yellow;
}

三. CSS的元素显示模式

元素以什么方式进行显示，比如<div>自占一行，<span>一行占多个

HTML元素一般分为块元素(<div>)和行内元素。

1. 块元素：

文字类的元素或者文字类块级标签里面也不能放其他块级元素。

如p或h1-h6中不能放div。

2. 行内元素

注意：链接a中可以放块级元素，但是给<a>转换以下块级模式最安全。

3. 行内块元素

注意：可以设置原本为行内元素的高度，行高，外边距以及内边距。

四. 元素显示模式的转换

将行内元素转换为块元素

a {width: 150px;height: 50px;background-color: pink;/* 将行内元素转换成块内元素 */display: block;
}

块元素转换成行内元素

div {width: 150px;height: 50px;    //无效background-color: pink;display: inline;
}

转换成行内块元素

display: inline-block;

实现文字垂直居中的代码（小技巧噢）

让盒子的高度等于文字的行高。

五. CSS的背景

给页面元素添加背景样式：颜色，图片，平铺，位置，固定等

1. 背景颜色：background-color: transparent（透明） | 颜色

2. 背景图片：background-image

非常便于控制位置（精灵图也是一种应用场景）。

background-image: none | url(图片地址);

3. 背景平铺：background-repeat

background-repeat: no-repeat | repeat-x | repeat-y;
//默认平铺

4. 背景图片位置：background-position

background-position: x  y;

如果参数是方位名词，则x y的顺序不影响。若只给出一个方位名词，则另一个默认居中显示。

如果参数是精确单位，第一个肯定是x坐标，第二个肯定是y坐标。若只有一个，那么一定是x，y居中对齐。

可以方位名词和精准单位混合使用，但第一个一定是x，第二个一定是y。

5. 背景图像固定（背景附着）：background-attachment

background-attachment: scroll | fixed;

scroll为默认值。

6.背景复合写法

一般习惯约定顺序为：颜色地址平铺滚动位置。空格隔开。

7. 背景色半透明

background: rgba(0,0,0,0.3); /*a为透明度取值在0-1之间*/

六. 总结

七. 综合案例：五彩导航

CSS3 自学笔记（二）相关推荐

数据结构自学笔记二、栈
数据结构自学笔记二.栈栈的定义栈的作用栈的顺序存储与随机存储栈的基本功能的实现先以顺序存储结构的栈为例. 然后再说说随机存储结构的栈吧两栈共享空间栈的一个重要应用--四则运算算式的后缀 ...
尚硅谷H5+CSS3基础课笔记二（CSS部分）
CSS3 css(层叠样式表)处理网页的表现网页是一个多层的结构,用css可以分别为网页的每一个层设置样式,最终展示的是最上边一层. 内联样式:内部样式表:外部样式表<link rel=&qu ...
MySQL自学笔记(二)
二.数据库管理 2.1 外键(FOREIGN KEY) MySQL 外键约束(FOREIGN KEY)用来在两个表的数据之间建立链接,它可以是一列或者多列.一个表可以有一个或多个外键. 外键对应的是参 ...
CSS3 自学笔记（一）
HTML只关注内容的语义,做样式时非常繁琐且不美观. CSS(Cascading Style Sheets)称为CSS样式表或级联样式表,主要用于设置HTML页面中文本内容,段落设置,版面布局等. 让 ...
Docker自学笔记 (二)
容器数据卷什么是容器数据卷将应用和环境打包成一个镜像! 如果数据都在容器中,容器一删除数据就会丢失.需求:数据持久化容器之间可以用一个数据共享的技术!Docker 容器中产生的数据,同步到本地 ...
Photoshopcs6 自学笔记二图像处理
图像处理操作污点修复工具快捷键 j 按 [ 键缩小画笔范围,按 ]键放大画笔范围. 污点修复工具可以抹去图片要删除的地方. 修复画笔工具修复如下图的时候可以使用修复画笔工具按住alt键获取到源 ...
SAP ABAP基础知识自学笔记二
三.各种定义基本格式 DATA:XX TYPE YY VALUE＇ZZ＇各种来了 *参照数据字典定义 *参照数据元素定义 data v9 type zdata_jg_20100325_01. *参 ...
【Spring Data JPA自学笔记二】初识Spring Data JPA
文章目录 Spring Data JPA是什么? Spring Data JPA的配置配置pom.xml 配置applicationContext.xml Spring Data JPA的使用 Sp ...
python自学笔记
https://www.cnblogs.com/secondtonone1/p/6796323.html 恋恋风辰 python自学笔记(一) 我没学过python,通过网上和一些图书资料,自学并且记 ...

CSS3 自学笔记（二）