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. echarts——横向柱状堆叠图

    var data = { data: [[320], [120], [220], [150]], legend: ['华为', '中兴', '烽火', '瑞斯'], } var option; var ...

  2. rest-assured:外部数据驱动之通过CsvFile数据源来使用外部数据源（org.junit.platform.commons.PreconditionViolationException: Classpath resource [repo.csv] does not exist）

    代码: package ghcdgj.restful.framework;import static io.restassured.RestAssured.given;import static io ...

  3. redis 和docker等名词了解

    redis redis产生 redis是MySQL数据库经常直接面对大量的读写访问,面对比较复杂的数据据操作,会导致数据库I/O反映缓慢或者奔溃: 有人研究学习CPU从内寸直接读取数据,把MYSQL经 ...

  4. chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载

    医院项目,记录下,花了一个晚上的时间. 注意:最新版本的chrome浏览器已支持module语法,需要在web服务器环境下运行! 注:chrome76版本及以上不再需要设置了,浏览器已默认支持,至于从 ...

  5. 【C学习笔记】day1-3 判断1000年---2000年之间的闰年

    #include<stdio.h> int main() { for (int y = 1000; y <= 2000; y++) if (y % 100 == 0) { if (y ...

  6. ant Vue 表格列多数据溢出省略显示

    1.实现下图缩式 二次更新:通过customRender设置添加悬浮窗,不需要再设置样式,注意动态数据使用的时候是一个大括号 { title:'业务分类', align:"center&qu ...

  7. docker 清除redis缓存

    1.仓库容器id: docker  ps 2.进入容器:docker exec -it 容器id  redis-cli 3.清除所有缓存:flushall

  8. HTML复习（19.背景样式）

    重点 掌握背景颜色属性 掌握背景图片属性 背景样式简介 在CSS中,背景样式包括2个方面:①背景颜色:②背景图片.在Web1.0时代,都是使用background或者bgcolor这两个"H ...

  9. js中宏任务，微任务，异步，同步，执行的顺序

     [微任务]包括:Promise ,    process.nextTick() *node.js里面的  [宏任务]包括:整体代码script,  setTimeout    setInterval ...

  10. sql文件导入错误，There was an error while executing a query. The query and the error message has been logged at: C:\U

    x.sql转储文件导入异常. 之前成功导入过,再次导入异常. 1修改my.ini文件,2修改sql文件编码.都不适用. 解决方法:新建数据库,再次导入成功.注意编码.