一路慢行的CSS之旅

1、CSS常用选择器

/*【CSS常用选择器】*/

/* 标签选择器
* 写法： HTML标签名{}
* 作用：可以选中页面中，所有与选择器同名的HTML标签。
*/
li{
/*color: red;
font-size: 24px;*/
}

/* 类选择器(class选择器)
* 写法： .class名{}
* 调用：在需要调用选择器样式的标签上，使用class="class名"调用选择器
* 优先级： >标签选择器
*/
.first{
/*color: blue;*/
}

/* ID 选择器
* 写法： #ID名{}
* 调用：需要调用样式的标签，起一个id="ID名"
* 优先级： ID选择器>class选择器
* 注意：一个页面中，不能出现同名ID
*/
#one{
/*background-color: yellow;
color: green;*/
}

/* 【Class选择器与ID选择器的区别】
* 1、写法不同:class选择器用.声明，ID选择器用#声明；
* 2、优先级不同： ID选择器>class选择器
* 3、作用范围不同： class选择器可以多次调用，ID选择器只能使用一次。
*/

/* 【选择器的命名规范】
* 1、只能有字母、数字、下划线、减号组成；
* 2、开头不能是数字。也不能是只有一个减号。
*
* 一般，起名要求有语义，使用英文单词与数字的组合。
*/

/* 通用选择器
* 写法： *{}
* 作用：可以选中页面中所有的HTML标签。
* 优先级：最低！！！
*/
*{
/*color: orange;*/
}

/* 并集选择器
* 写法：选择器1,选择器2,……,选择器n{}
* 生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
*/
li,.first{
/*color: red;*/
}

/* 交集选择器
* 写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔
* 生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效
*/
li.first{
/*color: red;*/
}

/* 后代选择器
* 写法：选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
* 生效规则：只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）
*
* 通俗的讲：只要后一个选择器，在前一个选择器里面即可。
*/
div span{
}

/* 子代选择器
* 写法：选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
* 生效规则：必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能间隔任何标签）
*/
div>span{
color: orangered;
}

2、CSS导入方式和优先级

【优先级的权重问题】
*
* 1、CSS生效的第一原则是“近者优先”！即，哪个选择器作用于最里层标签，则这个选择器生效；
*
* 2、当选择器作用于同一层时，可以根据优先级权重，进行累加计算：
* ID选择器*100 > class选择器*10 > 标签选择器*1
*
* 注意：并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加。
*
* 3、当选择器作用于同一层，且优先级权重相等时。则，写在最后的选择器生效。
*
*/

/* 【引入CSS的三种方式】
* 1、行内样式表：直接在HTML标签中，使用style=""的方式引用；
* <div style="height: 100px;"></div>
* 优点：使用灵活，优先级权重最高？
* 缺点：不符合W3C关于“内容与表现分离”的要求；不利于样式复用；
*
* 2、内部样式表：在<head></head>标签中，使用<style>标签包裹CSS代码；
* 特点：一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
*
* 3、外部样式表：将CSS单独写入CSS文件中，并与HTML文件关联。
* 优点：彻底实现HTML与CSS的分离，符合W3C规范，有利于多页面复用统一样式；
* [导入CSS文件的两种方式]
* ① 在<head>标签中，使用link链接：
* <link rel="stylesheet" type="text/css"
* href="css/02-CSS.css" />
* ② 在<style>标签中，使用@import导入：
* @import url("css/02-CSS.css");
*
* [两种导入方式的区别]
* ① link属于标准的HTML标签，而@import不是标准标签；
* ② link可以兼容所有低版本浏览器，而@import只在CSS2之后能用；
* ③ link是将两个文件链接起来，起桥梁作用；而@import相当于将CSS文件复制到HTML文件中；
* ④ link会在HTML文件边加载的过程中，边链接CSS文件；
* @import会在HTML文件全部加载完以后，再导入CSS文件；
*
* 综上所述，我们使用link链接的方式，加载CSS文件。
*/
@import url("css/02-CSS.css");

</style>

CSS常用文本属性

/* CSS中的颜色表示方式
* ① 直接使用颜色的单词表示：red、green、blue
* ② 使用颜色的十六进制数表示：#ff0000 #f00
* 六位数，两两分组，分别表示红、绿、蓝的配比；
* ③ rgb(0~255,0~255,0~255); 三位数，分别表示红、绿、蓝的配比
* rgba(); 第四位数，表示透明度。
*/
200px;
height: 200px;
background-color: #E57F13;

/* 【CSS常用文本属性】
* 1、字体、字号类：
* ① font-weight：字体粗细。 bold-加粗、normal-正常、lighter-细体
* 也可以使用100-900数值，400表示normal，700表示bold
*
* ② font-style: 字体样式。 italic-倾斜、normal-正常
*
* ③ font-size: 字号。可以写px单位，也可以写%
* 200%表示浏览器默认大小(16px)的两倍=32px
*
* ④ font-family: 字体系列(字体族)。
* >>> 可以直接写字体名，也可以写字体系列名。
* >>> 常用字体系列：serif-衬线体 sans-serif-非衬线体；
* >>> font-family可以接收多个值，用逗号分隔。表示优先使用第一个，如果没有这个字体，依次向后使用。通常，最后一个值放字体系列名；
* eg: font-family: "黑体","微软雅黑",sans-serif;
*
* ⑤ font缩写形式：
* >>> 顺序必须是：
* font-weight font-style font-size/line-height font-family
* >>> 不同属性之间，用空格分隔；
* >>> font-size/line-height必须一组，用/分隔；
* >>> font-family多个字体之间，用逗号分隔
* >>> eg： font: bold italic 32px/50px "微软雅黑",serif;
*
* 2、字体颜色
* ① color：字体颜色可以使单词、十六进制、RGB等
*
* ② opacity：透明度，可选值0-1
* [opacity和RGBA的区别]
* >>> RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用；
* >>> rgba仅仅是让当前元素设置的颜色透明；
* 而opacity，会让当前元素里面的所有文字、背景、子元素都透明；
*
*
* 3、行距、对齐、其他类
* ① line-height: 行高。可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
* >>> 行高重要作用：让单行文字在div中垂直居中？
* 设置行高等于div的高度，即可让单行文字垂直居中。
*
* ② text-align：设置区域内的行级元素水平对齐方式left/center/right
*
* ③ letter-spacing：字符间距，字与字之间的距离
*
* ④ text-decoration: 文本修饰；
* underline-下划线、overline-上划线、line-through-删除线、none
*
* ⑤ overflow：设置超出区域文字的显示方式。
* >>> overflow: hidden; 超出区域的文字隐藏不显示；
* >>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
* >>> overflow: auto; 自动。文字多显示滚动条，文字少，不显示滚动条。
* >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
* overflow-y: scroll; overflow-x: hidden;
*
* ⑥ text-overflow：设置行末多余文字的显示方式；
* >>> clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
* >>> 显示省略号，需要配合white-space: nowrap;使用
* >>> 【重点】设置行末显示省略号(三行代码，缺一不可)
* overflow: hidden;
* white-space: nowrap;
* text-overflow: ellipsis;
*
* ⑦ white-space: nowrap; 设置中文行末，不断行显示
*
* ⑧ text-indent: 首行缩进。
*
* ⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
* -webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari
*
* ⑩ text-shadow: 文字阴影，有四个属性值，空格分隔；
* >>> 水平阴影距离，正数表示阴影右移，负数左移；
* >>> 垂直阴影距离，正数表示阴影下移，负数上移；
* >>> 阴影模糊距离， 0表示阴影一点不模糊；
* >>> 阴影的颜色；
* >>> eg:text-shadow: 20px -10px 2px blue;
*

CSS常用背景属性

/* 【CSS常用背景属性】
* 1、 background-color：背景色
*
* 2、 background-image: 背景图。使用url("")选择背景图片。背景图和背景色同时存在时，背景图覆盖背景色。
*
* 3、 background-repeat: 背景图的重复方式。
* no-repeat-不平铺、repeat-平铺、repeat-x-x轴平铺、 repeat-y-y轴平铺
*
* 4、 background-size：背景图的大小
* [指定宽度高度]
* >>> 宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
* >>> 当写两个属性时，分别表示宽度、高度；
* 当写一个属性时，表示宽度，高度将会等比缩放；
* [其他属性值]
* >>> contain: 图片等比缩放，直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
* >>> cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)
*
* 5、 background-position：背景图偏移量
* >>> 指定位置： left/center/right top/center/bottom
* 当，只写一个值时，另一个默认居中。
* >>> 指定坐标：两个属性分别表示：水平位移垂直位移
* ① 坐标的值，可以是px单位，也可以是百分数
* ② 当写px单位时：
* 水平方向：正数右移负数左移；垂直方向：正数下移负数上移；
* (左负右正上负下正)
* ③ 当写%百分数时：
* 一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比例。 eg：background-position:30%; 水平方向去掉图片宽度，剩余区域3:7分。 */

CSS新增属性

/* display 属性
* 可以设置元素以何种状态显示，可选值：
*
* none: 隐藏元素；
* block：显示为块级元素；
* inline：显示为行级元素；
* inline-block: 显示为内联块级元素。本身将是一个行级元素，但是，拥有块级元素的所有属性。比如宽度、高度、margin、padding等。。。
*
* [常见的inline-block级别的标签？]
* <img /> <input /> <textarea></textarea> <td></td>
*
* [隐藏一个元素的方式]
* 1、宽度或高度设为0px；配合overflow:hidden; 属性
* 2、 display:none; 显示display:block;
* 3、 opacity: 0; 设为全透明。但是元素的空间会占据；
* 4、 visibility: hidden; 隐藏元素，但是元素所在空间依然会占据。与opacity: 0;效果很像；
* 显示visibility隐藏的元素，visibility: visible;
*/
/*display: none;*/
background-color: yellow;
/*opacity: 0;*/
visibility: visible;
}
#div2{
height: 200px;
200px;
background-color: green;
}

/* 【CSS3 新增的属性前缀】
* 1、 -webkit- : Chrome/Safari浏览器；
* 2、 -moz- : 火狐浏览器；
* 3、 -ms- : IE浏览器；
* 4、 -o- : Opera 欧朋浏览器
*
* 【CSS 长度单位】
* 1、 px：表示像素。长度是固定的，表示占分辨率的几个像素点；
* 2、 % ：表示相对于默认值的百分比；
* 3、 em：长度与元素的字号挂钩。表示几倍的字号。
* 4、 rem: 与根元素的字号挂钩。即，与<html>标签的font-size挂钩，如果不设置则默认字号为16px;
* [em与rem区别]
* em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素字号，直到跟字号；
* rem与当前元素字号无关，直接与根元素字号挂钩。
*/
html{
/*font-size: 48px;*/
}
#div3{
font-size: 32px;
background-color: yellow;
height: 3rem;
}

#div4{
100px;
height: 1000px;
background-color: yellow;
padding: 30px;
border: 20px dotted red;
/* 【CSS3 背景属性】
* 1、background-clip : 设置背景图或背景色的裁切显示区域。
* >>> border-box从边框外缘开始显示；
* >>> padding-box从边框内缘开始显示；
* >>> content-box从文字内容区域开始显示;
* >>> 如果不在显示区域的背景图或者背景色，会被裁切掉不显示；
* 2、 background-origin：设置背景图从哪开始定位。
* >>> border-box: 背景图左上角从边框外缘开始；
* >>> padding-box: 背景图左上角从边框内缘开始；
* >>> contentbox: 背景图左上角从文字内容区开始；
*
* 3、 background-origin不会改变背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位；
* background-clip 只负责裁切出显示区域，但是并不关心背景图定位在哪；
* 4、 background-attachment：背景图的附着方式；
* >>> scroll: 背景图跟随区域滚动。默认效果；
* >>> fixed: 背景图充满整个+区域，并且背景图是固定的，不随滚动条滚动；
*
* 5、background 缩写形式：
* background:background-color background-image background-repeat background-atachment background-position;
*
*/
background-image: url(../01-HTML基本标签/img/sunyang.jpg);
/*background-clip: border-box;
background-repeat: no-repeat;

background-origin: content-box;*/
background-attachment: fixed;
}

#div5{
100px;
height: 100px;
background-color: red;
/* transition: 过渡属性，接受四个属性值
* ① 设置那个CSS属性，参与过渡；可以直接指定all/none；
* ② 过渡多少时间完成。通常 .3s .5s；
* ③ 过渡的样式效果。通常选ease；
* ④ 过渡延时几秒后再开始。可以省略不写；
*
* transition属性可以同时定义多个过渡效果，用逗号隔开；
* eg:transition: width .5s ease,height 1.5s ease;
*/
transition: width .5s ease,height 1.5s ease;
}
#div5:hover{
40px;
height: 40px;
background-color: yellow;
}

#div6{
100px;
height: 100px;
background-color: red;
transition: all .5s ease;
}
#div6-1:hover+#div6{
/* [transform 定义变换属性]
* 1、常用的变换函数：
* >>> translate(10px,10px) 平移,第二个不写默认为0
* >>> scale(1.1) 缩放，第二个不写，默认等于第一个
* >>> rotate(90deg) 旋转，默认绕Z轴转可以使用rotateX()等
* >>> skew(20deg,30deg) 扭曲，水平、垂直方向扭曲多少度；
*
* 2、transform可以同时实现多种变换，用空格分隔
* eg: transform: skew(20deg) scale(1.3) translate(100px);
*
* 3、transform-origin：定义变换起点，常用于旋转变换。
* 可选值： left/center/right bottom/center/top
* 也可以直接指定X、Y轴坐标点，第一个数为X轴；
*
* 例如：transform: rotate(90deg);
* transform-origin:right bottom;
* 表示：绕右下角旋转90度。
*/
transform: skew(20deg) scale(1.3) translate(100px);
/*transform-origin: 100px 200px;*/
}