PART-1 CSS的基础常识
一、什么是CSS?
W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言。
二、CSS应用的三种方式:
1. 行内样式表
行内样式表将CSS样式与HTML代码完全杂糅在一起,不符合W3C关于内容与表现分离的的基本规则,且不利于网站的维护。但是行内样式表在样式测试方面提供了便利,且优先级最高。不推荐使用。
2. 内部样式表
内部样式表在一定程度上将CSS样式与HTML代码分离,但是分离不够彻底,无法实现样式复用。(样式复用:多个网页共享同一样式。)内部样式表的优先级要低于行内样式表。
3. 外部样式表
外部样式表实现了CSS样式与HTML代码的彻底分离,方便样式复用和网站的维护,符合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文件。
4. 注意
①除行内样式表,内部样式表与外部样式表的链接均写于HTML的HEAD部分中。
②导入外部样式表时,除type属性可选写外,rel与href属性必须出现。
PART-2 CSS的常用选择器
1. 选择器的命名规则
①只能由字母、数字、下划线组成,不能有任何特殊字符;
②开头不能是数字,只能由下划线或者字母开头。
2. 常用选择器
2.1 标签选择器
写法:HTML标签名{}
作用:选中页面中所有的对应标签。
2.3 Class选择器
写法:.选择器名称{}
作用:需要改变样式的标签上使用class="选择器名称"来调用对应选择器。
2.4 Id选择器
写法:#选择器名称{}
作用:需要改变样式的标签上使用id="选择器名称"来调用对应选择器。
2.5 通用选择器
写法:*{}
作用:选中页面中所有标签。
2.6 后代选择器
写法:选择器1 选择器2 选择器3...{}
作用:比如说 div .li{}就表示满足div里面的class="li"的元素样式,其中选择器之间允许隔代。
生效规则: 只要满足,后一选择器是前一个选择器的后代,即可成效。(后代包括子代、孙代、重孙代。。。)
*
* 通俗的讲:只要后一个选择器,在前一个选择器里面即可。
2.7 子代选择器
写法:选择器1>选择器2>选择器3...{}
作用:用法大致与后代选择器相同,但要注意的是,选择器之间不允许隔代。
2.8 并集选择器
写法:选择器1,选择器2,选择器3...{}
作用:比如说 .li,#li{} 表示具备class="li"或者id="li"的形式便可生效,相当于数学逻辑中的“或”。
生效规则: 多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。
2.9 交集选择器
写法:选择器1选择器2选择器3...{}
作用:比如 .li,#li{} 表示必须同时具备class="li"和id="li"的形式可生效,相当于数学逻辑中的“且”。
生效规则: 多个选择器取交集,则必须满足所有选择器的要求,才能生效
2.10 伪类选择器
写法:选择器名称:伪类状态{}
常见的伪类状态:①link 未访问状态;②visited 已访问状态;③hover 鼠标指上状态;
④active 激活选定状态;⑤focus 获得焦点时状态(input常用)。
超链接多种伪类共存时的顺序: link/visited→visited/link→hover→active
3. 选择器的优先级
3.1 第一原则:近者优先!最内层选择器>>>>>>>外层!!!
例如:div ul li > div #ul
li在ul内层,所以li标签选择器能覆盖外层id选择器
3.2 当作用在同一层时:ID选择器>class选择器>标签选择器!!!
例如:div #li > div .li > div li
只要最后一个选择器都作用于li上,那无论之前有多少层
选择器嵌套,均没有远近关系。
3.3 当作用于同一层,且最后一层为同等选择器。
例如: div ul .li > div li
作用范围越精准,则优先级更高。
3.4 当优先级完全相同时,写在后面的选择器会覆盖前面的选择器 。
PART-3 CSS的属性单位
1. 长度单位:像素px,在某些情况下可以使用百分比。
2. 颜色:
2.1 十六进制写法:#XXXXXX (X:1-F)。
2.2 颜色的英文名称。
2.3 RGB写法:(0-255,0-255,0-255) 三者由前到后分别对应红、绿、蓝三种颜色的比例。
2.4 RGBA写法:(0-255,0-255,0-255、0-1) 前三者同RGB写法,最后为透明度,此透明度 只会使当前控件变透明,并不会影响其子控件。
PART-4 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;
* 文字加空格
以下举例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS常用文本属性</title> <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: rgb(177,0,0); font-weight: 900px; font-style: italic; font-size:50px ; color: #CCCCCC; opacity: 0.7; line-height: 100px; letter-spacing: 10px; text-decoration: line-through; overflow: hidden; text-shadow: 1px 1px 20px green; text-indent: 20px; -webkit-text-stroke: 1px red; white-space: nowrap; text-overflow: ellipsis; /*font:italic bold 75%/1.8 ‘Microsoft Yahei‘,sans-serif;*/ } </style> </head> <body> <div class="div1"> 嘿嘿嘿 <br />哈哈哈哈哈 </div> </body> </html>
效果图如下:
PART-5 CSS的常用背景属性
第二部分----CSS的基础语法