前端CSS学习

一、CSS基础语法

1. 格式：选择器{属性1: 值1; 属性2: 值2; …}
   属性：
   • width、height：长度单位有两种表示：px、%
   • background-coclor：背景色
2. CSS注释：/* 注释的内容 */
   快捷键：Ctrl + /； Shift + Alt + a

二、CSS样式的引入方式 

内联（行内、行间）样式
在html标签上添加style属性来实现

<div style="width: 100px; height: 100px; background-color: aquamarine;">块1</div>

内部样式
在< style>标签内添加的样式，< style>< /style> 一般写在head部分
优点：内部样式的代码可以复用，符合W3C的规范标准：尽量让结构和样式分开处理

外部样式
引入一个单独的CSS文件，name.css
引入方法：
1）通过< link>标签引入外部资源，rel属性指定资源和页面的关系，href属性指定资源的地址，< link> 标签只能存在于head部分，可以出现多次
2）通过 @import 方式引入，这种方式有很多问题，不建议使用

三、CSS中的颜色表示法

1. 单词表示法
2. 十六进制表示法：#十六进制
3. RGB三原色表示法：rgb(数1，数2，数3)

四、CSS背景样式

background-color：背景颜色
background-image：背景图片
• 展示性的图片通常用< img>，装饰性的图片（比如做一个小图标、背景等）用background-image
• 使用时要为该属性设置一个URL值：url(背景地址)
• 默认会水平和垂直方向都铺满背景图
background-repeat：背景图片的平铺方式
• repeat-x：x轴平铺
• repeat-y：y轴平铺
• repeat：x、y都进行平铺，默认值
• no-repeat：都不平铺，不平铺时，若图片大小 < 背景大小，则图片默认会在背景的左上角
background-position：背景图片的位置
支持的单位：
• x、y：背景左上角坐标为（0px,0px），x和y的值可正可负
• 单词：x轴有left、center、right；y轴有top、center、bottom
• 百分比
background-attachment：背景图片随滚动条的移动方式，有两个可选值：
a)scroll：默认值，默认情况下，背景会随滚动条滚动，当滚动到超过图像的位置时，图像就会消失。（采用默认值时，背景的位置background-position是按照当前元素进行偏移的）
b)fixed：背景图片固定不动，但容器会随滚动条移动（背景的位置是按照浏览器进行偏移的）

五、CSS边框样式

1. border-style：边框样式
   取值：solid（实线） | dashed（虚线） | dotted（点线）
2. border-width：边框大小
3. border-color：边框颜色，可以设置透明颜色transparent。

六、CSS文字样式

font-family：字体类型
• 英文字体：Arial…
• 中文字体：宋体、微软雅黑（默认）…

可以设置多个字体类型
多个字体类型的设置目的：作为备选方案，即当用户计算机中没有第一种字体的时候，会显示为设置的第二个类型。
引号：
当字体名中有一个或多个空格，或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
font-size：字体大小
• 默认大小是16px
• 写法：可以直接具体写**px（为了更好地实现对齐，字体大小一般设置为偶数），也可以通过单词的方式进行设置（但不建议）

font-weight：字体粗细
只有两种显示效果，正常和加粗。有两种写法：
1)normal（默认）、bold
2)数字：100~ 900之间的成百的整数，100~ 500效果为normal，600~900效果为bold

font-style：字体样式
normal（正常）、italic（斜体）
【注】oblique也是表示斜体，用的比较少。
两个斜体的区别：italic 带有倾斜属性的字体才可以设置倾斜操作；
oblique 没有倾斜属性的字体也可以设置倾斜操作。
所以italic比较符合规范。

color：字体颜色

七、CSS段落样式

text-decoration：文本装饰
取值
• 下划线：underline
• 删除线：line-through
• 上划线：overline
• 不添加任何装饰：none
可添加多个文本修饰，多个修饰之间用空格隔开。

text-transform：文本大小写（针对英文）
• 小写：lowercase
• 大写：uppercase
• 只针对每个单词的首字母大写：capitalize

text-indent：文本缩进
1)主要针对首行缩进
2)em单位：是一个相对单位，1em永远都和字体大小（font-size）相同。但如果一段文字中出现了英文，字体仍然比较难对齐。

text-align：文本水平对齐方式
left、right、center、justify（两端点对齐）

line-height：定义行高

• 默认行高：不是固定值，而是根据当前字体的大小不断变化的
• 取值：px（像素）；（比例值，和文字大小成比例）

letter-spacing：定义字间距

word-spacing：定义词间距（针对英文）

强制折行（针对英文、阿拉伯数字）
• word-break: break-all; 非常强烈的折行
• word-wrap: break-word; 不是那么强烈的折行，可能会产生一些空白的区域

八、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合样式的写法是通过空格对多个属性进行分割，有些复合写法不需要关心顺序，例如background和border，有的需要关心顺序，例如font。
单一样式与复合样式尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式。因为在复合样式里没有写的样式会按照默认样式进行设置，所以要后写单一模式把之前复合里默认的样式覆盖掉。

九、CSS选择器

id选择器
css：#elem{}
html：id=“elem”
• 在一个页面中，id值是唯一的
• 命名规范：字母 _ - 数字组合而成，并且第一位不能是数字
• 命名方式：驼峰式（searchSmallButton）、下划线式（search_small_button）、短线式（search-small-button）

class选择器
css：.elem{}
html：class=“elem”
• class选择器是可以复用的
• 可以添加多个class样式
• 多个标签的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
• 标签+类名的写法

 

标签选择器（TAG选择器）
css：div{ }
html：< div>
使用的场景：
• 去掉某些标签的默认样式时
• 复杂的选择器中，如层次选择器

群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用 

通配选择器
*{ }
因为会给所有标签添加样式，所以要慎用。

 

层次选择器
• 后代选择器：M N { }
• 子代选择器：M > N { }
• 兄弟：M ~ N { }
• 相邻：M + N { }

 

[attr]    用于选取带有指定属性的元素
[attr=value]    用于选取带有指定属性和值的元素
[attr~=value]    用于选取属性值中包含指定词汇的元素
[attr|= value]    用于选取带有以指定值开头的属性值的元素
[attr^=value]    匹配属性值以指定值开头的每个元素
[attr$=value]    匹配属性值以指定值结尾的每个元素
[attr*=value]    匹配属性值中包含指定值的每个元素

=：完全匹配         *=：部分匹配
^=：起始匹配         $=：结束匹配        [ ] [ ] [ ]：组合匹配

伪类选择器

同一个标签，根据其不同的种状态，有不同的样式，这就叫做“伪类”。伪类用冒号来表示。
写法：M：伪类{ }
• :link 访问前M的样式（只能添加给a标签）
• :visited 访问后M的样式（只能添加给a标签）
• :hover 鼠标移入时M的样式（可以添加给所有标签）
• :active 鼠标按下时M的样式（可以添加给所有标签）
如果4个伪类都生效，一定要注意顺序：L V H A
一般的网站不会对a链接做4个操作，只会设置a{ }和a:hover{ }
• :after、:before 通过伪类的方式给元素添加一个文本内容
• :checked、:disable、:focus 都是针对表单元素的

结构伪类选择器

E:first-child    匹配父元素中的第一个子元素E
E:last-child    匹配父元素中的最后一个E元素
E:nth-child(n)    匹配父元素中的第n个子元素E
E:first-of-type    指定类型E的第一个
E:last-of-type    指定类型E的最后一个
E:nth-of-type(n)    指定类型E的第n个

 

十、CSS样式继承

CSS 继承是指我们设置上级(父级)的CSS样式

布局相关的样式默认不能被继承，但可以通过设置继承属性 inherit 来继承布局相关属性

/*设置继承边框样式*/
p{border:inherit}

拓展：继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是会优先显示浏览器的默认样式。

• a标签的color会继承失效
• h系列标签的font-size会继承失效
• div的高度不能继承，但是宽的有类似于继承的效果 

十一、CSS优先级

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式
内部样式（在< style>标签内添加的样式）与外部样式（通过link标签引入的样式）优先级相同，如果设置了相同样式，那么后写入的引入方式优先级高
单一样式优先级
行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承

!important
提升样式优先级，非规范方式，不建议使用。另外，!important也不能提升继承的优先级。

标签+类 >单类

<style>
	div.box{color:blue;}  /*标签+类优先级高于单类，div中的文字会显示为蓝色*/
	.box{color:red;}
</style>

群组优先级

群组选择器与单一选择器优先级相同，靠后写的优先级高