CSS选择的艺术
1.css规则由两部分构成：选择器，声明（声明由属性和值构成且末尾跟一个分号）
2.css注释：/*……*/
3.CSS样式的引用
（1）行内样式（内联样式）
例如：<p style="color:red;">……</p>
（2）内部样式表（嵌入样式）
例如：<style type="text/css">
 ……
          </style>
（3）外部样式表：把CSS样式代码写在独立的一个文件夹中
引入外部文件：<link href="XX.css" rel="stylesheet" type="text/css"/>
（4）导入式
@import “外部css样式”
4.CSS使用方法区别
类别   引入方法   位置   加载
行内样式   开始标签内style   html文件内  同时
内部样式   <head>中<style>内  html文件内  同时
链入外部样式  <head>中<link>引用 · CSS样式文件  页面加载时，
     与html文件分离  同时加载CSS样式
导入式   在样式代码最开始处 ·  CSS样式文件与 在读取完html文件之
@import ·    html文件分离  后加载
5.使用链入外部样式的好处
（1）CSS和HTML分离
（2）多个文件可以使用同一个样式文件
（3）多文件引用同一个css文件，css文件只需下载一次
6.CSS使用方法优先级
行内样式>内部样式>外部样式
说明：（1）链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
（2）最后定义的优先级最高（就近原则）
7.CSS选择器
（1）类选择器：class
（2）ID选择器：id
（3）群组选择器：集中统一的设置样式
（4）全局选择器：所有标签设置样式
（5）css后代选择器：
例如：<p><em>……</em></p>
p em{font-size:40px;}（中间使用空格隔开）
（6）伪类选择器：
链接伪类：链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态
伪类  说明
:link  未访问的链接
:visited  已访问的链接
:hover  鼠标悬停状态
:active  激活的链接
伪类，:hover和:active
1.:hover用于访问的鼠标经过某个元素时
2.:active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）
链接伪类的顺序
:link>:visited>:hover:active
说明：
1.a:hover必须置于a:link和a:visited之后，才有效
2.a:active必须置于a:hover之后，才有效
3.伪类名称对于大小写不敏感
8.CSS的继承和层叠
（1）CSS继承
a.从父元素那继承部分CSS属性
b.好处，节省代码
（2）CSS层叠
a.可以定义多个样式
b.不冲突时，多个样式可以层叠为一个
c.冲突时，按不同样式规则优先级来应用样式
9.CSS选择器优先级
行内样式>内部样式>外部样式
说明：（1）链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
10.CSS权值
CSS优先级规则
同一样式中:
（1）.权值相同：
就近原则（离被设置元素越近优先级越高）
（2）.权值不同
根据权值来判断CSS样式
哪种CSS样式权值高，就使用哪种样式
11.选择器权值
（1）标签选择器：权值为1
（2）类选择器和伪类：权值为10
（3）ID选择器：权值为100
（4）通配符选择器：权值为0
（5）行内样式：权值为1000
12.权值规则
（1）统计不同选择器的个数
（2）每类选择器的个数乘以相应的权值
（3）把所有的值相加得出选择器的权值
13.CSS样式命名规则
（1）采用英文字母、数字以及"-"和"_"命名
（2）以小写字母开头，不能以数字和"-"、"_"开头
（3）命名形式：单字，连字符，下划线和驼峰
CSS文本样式
1.HTML、CSS、JavaScript之间的关系
-HTML是网页内容的载体
-CSS样式是表现（外观控制）
-JavaScript是行为，用来实现网页特效效果
2.CSS文字样式属性
·字体：font-family
字体集：
-Serif
-Sans-serif
-Monospace
-Cursive
-Fantasy
·文字大小：font-size
·文字颜色：color
·文字粗细：font-weight
-normal
-bold
-bolder
-lighter
-100~900
（1）字体变形：font-variant
font-variant:normal | small-caps
·文字样式：font-style
3.文本对齐方式
（1）text-align:left | right | center | justify
注：只对于块级元素有效
4.行高：line-height:长度值 | 百分比
5.设置元素内容的垂直方式：vertical-align
语法：
vertical-align：baseline | sub | super | top | text-top
middle | bottom | text-bottom | 长度 | 百分比
6.其他文本样式
word-spacing:设置元素单词之间的间距
letter-spacing:设置元素字母之间的间距
text-transform:设置元素内部文本的大小写，capitalize | uppercase |
lowercase | none
text-decoration:设置元素内文本的装饰，underline | overline | line-through | blink | none

CSS选择艺术以及CSS文本样式的更多相关文章

  1. css经常使用的六种文本样式

    css当中经常使用的六种文本样式 css 文本样式是相对于内容进行的样式修饰,下面来说下几种常见的文本样式. 首行缩进 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空 ...

  2. CSS颜色、单位、文本样式

    一.CSS颜色:关键字 red16进制的6位 #ffffff16进制的3位 #fffrgb(0,255,100) 取值范围:0~255 (r:red.g:green.b:blue)rgba(0,255 ...

  3. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

  4. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  5. （3）css文本样式

    本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式.                       一.弄懂文本文字的制作.利用css的样式定义版面 ...

  6. JavaScript（4）——CSS选择的艺术

    CSS选择的艺术 常用常见的选择器: 类选择器[ .class ],id选择器[ #id ],全局选择器[ * ],元素选择器[ element ] 根据层次关系定位: (1) element, el ...

  7. CSS中常见的6种文本样式

    前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...

  8. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  9. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  10. 重温CSS之背景、文本样式

    CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...

随机推荐

  1. ABAP 指定字符替换为空格

    上代码 DATA:str1 TYPE string VALUE '小红##爱#six##小绿#666'. *******DATA(str1) = '小红##爱#six##小绿#666'. " ...

  2. import cv2时出现ImportError: DLL load fail:找不到指定模块

  3. JVMCFRE003 bad major version问题

    项目启动异常日志 [21-11-18 23:46:58:166 CST] 00000020 DispatcherSer I org.springframework.web.servlet.Framew ...

  4. HTML5代码大全

    一.HTML各种命令的代码: 1.文本标签(命令)  <pre></pre>         创建预格式化文本 <h1></h1>         创建 ...

  5. 前端电商 sku 的全排列算法

    需求 需求描述起来很简单,有这样三个数组: let names = ["iPhone",'iPhone xs'] let colors = ['黑色','白色'] let stor ...

  6. flex布局，均分的剩余空间不等分问题

    flex布局:使用flex-grow均分剩余空间,每个盒子都要给个初始宽度,才能均分

  7. antd Vue--this.$confirm弹窗使用

    看API中this.$confirm弹窗使用不对 讲的也不明确,在此记录下正确的用法 this.$confirm("确认删除文件?",{ type:'error'}).then(( ...

  8. tidevice 报UsbmuxReplyCode.BadDevice错误解决办法

    备忘 换了个新手机照常使用tidevice进行操作发现报错 tidevice.exceptions.MuxReplyError: UsbmuxReplyCode.BadDevice 查了好久,终于解决 ...

  9. VMware 15pro虚拟机网络设置

    在关闭虚拟机的情况下:VM 15pro. 编辑->虚拟网络编辑器:

  10. 删除Windows10资源管理器多余的入口

    ///// 删除3D对象 定位到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\MyComputer\Nam ...