CSS层叠样式表选择器与背景笔记(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48666535/article/details/108048121

CSS

CSS简介

CSS时层叠样式表( Cascading Style Sheets )的简称.

CSS也是一种标记语言

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区

所有的样式，都包含在

 <head> 
   <style> 
     h4 { 
       color: blue; 
       font-size: 100px; 
     } 
    </style> 
 </head

基础选择器

标签选择器

把某一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式。不能设计差异化样式，只能选择全部的当前标签

标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
…
}

h1 {
属性1: 属性值;
属性2: 属性值;
…
}

类选择器

.类名 {
属性1: 属性值;
属性2: 属性值;
…
}

<div class=“red”>类选择器红色</div>

.red {

color: red;

}

多类名时,各个类名之间用","隔开

id选择器

#id名 {

属性1: 属性值1;

…
}

<div id=“red”>id选择id器红色</div>

#red {

color: red;

}

注: id不可重复, 具有唯一性

通配符选择器

通配符选择器使用“*****”定义，它表示选取页面中所有元素（标签）。

* {

属性1: 属性值1;

…

}

总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同标签,比如p	不能差异化选择	较多	p { color: re; }
类选择器	可以选出一个或多个标签	根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择一个标签	ID属性只能在每个html文档中出现一次	一般和js搭配	#nav { color: red; }
通配符选择器	选择所有标签	选择太多,有部分不需要	特殊情况使用	* { color: red; }

字体属性

属性	表示	注意点
font-size	字号	单位px像素，一定要跟上单位
font-family	字体	字体名
font-weight	字体粗细	加粗：700或bold，不加粗：normal或400，无单位
font-style	字体样式	倾斜：italic，不倾斜：normal
font	字体连写	1.顺序 2.字号和字体必须同时出现

文本属性

属性	表示	注意点
color	文本颜色	通常用十六进制表示
text-align	文本对齐	left：左对齐；right：右对齐；center：居中
text-indent	文本缩进	首行缩进2个字的距离 text-indent：2em；
text-decoration	文本装饰	none：没有装饰线；underline：下划线；overline：上划线；line-through：删除线
line-hight	行高	控制行与行之间的距离

在这里插入图片描述

引入方式

行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

<div style=“color: red; font-size: 12px;”>青春不常在，抓紧谈恋爱</div>

内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

 <style> 
    div { 
      color: red; 
      font-size: 12px; 
    } 
 </style>

外部样

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link> 标签引入这个文件。

<link rel=“stylesheet” href=“css文件路径”>

总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入最多，	吐血推荐	控制多个页面

复合选择器

后代选择器

元素1 元素2 { 样式声明 }

ul li { 样式声明 } /* 选择ul里面所有的li标签元素*/

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是**元素2 **
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

子选择器

选择某元素的最近一级子元素。就是亲儿子元素

元素1 > 元素2 { 样式声明 }

div > p { 样式声明 } /* 选择div里面所有最近一级p标签元素 */

元素1 和元素2 中间用 大于号 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1，元素2 { 样式声明 }

ul，div { 样式声明 } /* 选择ul和div标签元素 */

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

伪类选择器

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

链接伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus {  
   background-color:yellow; 
}

总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav, header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{} 和 a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

元素的显示模式

快元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

特点

独占一行
高度，宽度，外边距以及内边距
宽度默认容器的100%
是一个容器及盒子

注意：

文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
2.2 行内元素
**行内元素的特点： **

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：

文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内快元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）

总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内快元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

元素显示模式转换

元素显示转换还是很常用的，尤其是a标签的时候，虽然a标签可以嵌制div，转成快简单方便安全

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

案例

小米侧边栏案例

这里用的文字垂直居中非常巧妙，盒子高度为40，设置行高为40，行高等于盒子高度。行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        /* 2 鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>

    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

背景

属性	作用	值
background-color	背景颜色	预定颜色值；十六进制；RGB
backgroud-image	背景图片	url(图片路径)，【写法】
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y，默认，不，横向，纵向
background-position	背景位置	top \| center \| bottom \| left \| center \| right \| x，y坐标
background-attachment	背景附着	scroll（背景滚动）\|fixed（背景固定）
背景简写	书写简单	背景颜色图片地址平铺滚动位置；
背景半透明	背景透明	background: rgba(0,0,0,0.3); 后面必须4个值，最后一值（0-1）

三大特征

CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

CSS 层叠性口诀：长江后浪推前浪，前浪死在沙滩上。

继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

在这里插入图片描述

恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

行高继承

body {
font:12px/1.5 Microsoft YaHei；
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
此时子元素的行高是：当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

在这里插入图片描述

权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。