浅谈css样式及选择器
一、css 样式
CSS(Cascading Style Sheets) 美化样式
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
1. 如何引入css样式表
a. 内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
b. 行内式（内联式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
c. 外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head><link href="CSS文件的路径" rel="stylesheet" />
</head>
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
2. css字体样式
a. font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
b. font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:“微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
注意：
- 现在网页中普遍使用14px+。
- 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。
方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。
可以通过escape() 来测试属于什么字体。
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
c. font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
d. font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
注意：
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
e . font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
注意：
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
3. css外观属性
a. color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
b . line-height:行间距
ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。
c. text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
d. text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
e. text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
二、 选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
基础选择器
1. 标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
标签选择器 可以把某一类标签全部选择出来 div span
2. 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，即，class 其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
注意：
- 长名称或词组可以使用中横线来为选择器命名。
- 不建议使用“”下划线来命名CSS选择器。
输入的时候少按一个shift键;
浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“”) - 不要纯数字、中文等命名， 尽量使用英文字母来表示。
3. 多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。即，多个class
注意：
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。
4. id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
注意： id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
5. 通配符选择器
通配符 选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
在实际中不经常用
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {margin: 0; /* 定义外边距*/padding: 0; /* 定义内边距*/
}
css 复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
1. 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
2. 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
3. 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
记忆技巧：
交集选择器 是 并且的意思。 即…又…的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
4. 并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧：
并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
css样式思维脑图：
css选择器思维脑图：
浅谈css样式及选择器相关推荐
- 浅谈css样式（border、background、table）
border用法 border:边框.属性有:border-width,border-style,border-color. 1 <div id="d1"> 2 高度2 ...
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍 选择器权重 字体属性 文本属性 元素分类 display属性: 块状元素 行内元素 行内块元素 盒模型 内边 ...
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
- 浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...
- html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
- html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型
今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式 怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
- css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
- picker多选 vant_浅谈vant组件Picker 选择器选单选问题
浅谈vant组件Picker 选择器选单选问题 1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识:vue使用vant编辑用户性别 我就废话不多说了,大家还是直接看代码吧~ v-model ...
- CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动 一.选择器 选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
最新文章
- 用phpcms如何将静态页面制作成企业网站（下）
- WebComponent魔法堂:深究Custom Element 之 从过去看现在
- 面试题17: 打印从1到最大的n位数
- 1045. Favorite Color Stripe (30)
- 威纶触摸屏使用说明书_PLC变频器触摸屏综合实训
- springboot项目多moudle打包到一个jar
- 0x7fffffff是多少（也就是INT_MAX，首位是 0，其余都是1，f代表1111）
- php+条形码在线怎么生成,php实现在线生成条形码示例分享(条形码生成器)
- long 型应该加上 l或者L
- 电脑桌面的文件突然不见了怎么办
- 【计算机网络】（一）走进网络
- （38）STM32——NRF24L01无线通信
- 自己动手实现音乐播放器app
- 攻防世界 re insanity
- 【前端面试题】—21道有关移动端的面试题
- 2009年三季度基金持股减仓表1
- AcWing周赛 72 场 LeetCode单周赛 314 场 总结
- 专访Mockplus用户花生酱先生 | 金融行业的产品经理生涯
- 基于JMP公差设计探索稳健性的配方和工艺
- 抛物线中四边形面积最大值_函数动点与四边形面积最大值