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. tiktok运营工具

    1.自信点!这就是TikTok最全运营工具合集! - 知乎 (zhihu.com) 2.骄傲的和大家说!这就是TikTok最全运营工具合集! - 知乎 (zhihu.com) 3.如何批量去水印下载抖 ...

  2. Django新版本报错问题解决

    在创建app的时候会报如下错误: python3 manage.py startapp test django.core.exceptions.ImproperlyConfigured: SQLite ...

  3. shopt 内置命令启用shell选项 (extglob)

    使用shopt 内置命令启用shell选项 (extglob) 则会识别几个扩展模式匹配运算符 模式列表是由 | 分割 查看shell选项 extglob shopt |grep extglob 启动 ...

  4. 修改文件时mmap如何处理

    拷贝二进制(elf)文件 在拷贝二进制文件的时候,如果文件是一个可执行文件,并且有一个进程在运行这个可执行文件,那么拷贝的时候会出现"文本忙"(ETXTBSY)的错误提示,并且拷贝 ...

  5. 更换CentOS的下载源为阿里云

    阿里Linux镜像地址:http://mirrors.aliyun.com/ 1.备份mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cen ...

  6. 【快速学】指针是什么？指针常量、常量指针是什么？（C++）

    0.先上总结 指针是什么?指针是个数据类型.你可以定义一个指针变量,它里面存储的是个地址 如int a=3;,定义了一个int类型的变量a,值为3,它在内存中的地址为&a 同理,int *b= ...

  7. ComPiler200003：Story-Oriented Programming

    Story-Oriented Programming MAY 25TH, 2018 http://www.brandonkeown.com/2018/05/story-oriented-program ...

  8. Jenkins自动化部署nodejs项目（前端项目）

    1.安装nodejs插件 2.Linux系统安装nodejs (1)去nodejs官网下载最新包 https://nodejs.org/dist/latest/ (2)解压安装 tar xvzf no ...

  9. 7. 交换排序的阈值(swapThreshold)

    1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="U ...

  10. CG3Y/ CG3Z 程序迁移

    /usr/sap/trans/cofiles/K900075.S4Q 固定值  文件目录(AL11)下去找 C:\Users\lenovo\Desktop\publici\K900075.S4Q /u ...