一路慢行的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样式表:
rel:选择stylesheet
type:选择text/css,可以省略
href: 表示链接的CSS文件路径。
-->
<!--<link rel="stylesheet" type="text/css" href="css/02-CSS.css" />-->
CSS常用文本属性
/* CSS中的颜色表示方式
* ① 直接使用颜色的单词表示:red、green、blue
* ② 使用颜色的十六进制数表示:#ff0000 #f00
* 六位数,两两分组,分别表示红、绿、蓝的配比;
* ③ rgb(0~255,0~255,0~255); 三位数,分别表示红、绿、蓝的配比
* rgba(); 第四位数,表示透明度。
*/
width: 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;
width: 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{
width: 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{
width: 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{
width: 40px;
height: 40px;
background-color: yellow;
}
#div6{
width: 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;*/
}