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. 3阶（次）贝塞尔曲线的JavaScript(JS)实现

    php中文网数学符号的显示太差了,推荐看这里 贝塞尔曲线简介:贝塞尔曲线,是贝塞尔老爷子在使用电子计算机设计汽车零件的时候 进行曲面设计而采用的一种参数化的样条曲线. 一般参数方程: B(t) = \ ...

  2. js实现光标移入和移出元素事件

    js实现光标移入和移出元素事件 效果实现: 代码: i标签添加事件 var onmouse = 'onmouseover = "overshow(this)" onmouseout ...

  3. SSR,SSAO

    3D Game Shaders For Beginners Screen Space Reflection (SSR)https://lettier.github.io/3d-game-shaders ...

  4. SFINAE几种实现方式

    一.通过函数返回值实现 template<class T> typename std::enable_if<std::is_trivially_default_constructib ...

  5. Hide-and-Seek: Forcing a Network to be Meticulous for Weakly-Supervised Object and Action Localization概述

    0.前言 相关资料: paper 网站 论文解读(知乎,CSDN) 论文基本信息: 领域:弱监督动作定位 发表时间:ICCV2017 1.针对的问题 大多数网络只识别图像最具有鉴别力的部分,不是所有相 ...

  6. CF850F 题解

    题意 传送门 有一袋 \(n\) 个颜色球,第 \(i\) 个颜色的球有 \(a_i\) 个. 当袋子里至少有两个不同颜色的球时,执行以下步骤: 一个接一个的按照顺序随机取出两个的球,这些球的颜色可能 ...

  7. CF79D 题解

    题解 传送门 你有 \(n\) 个灯泡,一开始都未点亮. 同时你有 \(l\) 个长度,分别为 \(a_1 \sim a_l\). 每次你可以选择一段连续的子序列,且长度为某个 \(a_i\),并将这 ...

  8. Java流程控制之用户交互Scanner

    Scanner对象 java.util.Scanner是Java5的新特征,可以通过Scanner类来获取用户的输入 #基本语法# Scanner s = new Scanner(System.in) ...

  9. js已知多边形坐标点，求多边形的中心点坐标

    你需要传入的数据类型如下: // 取面对象 中心点 var calculateCenter = function (lnglatarr) { var total = lnglatarr.length; ...

  10. TypeScript Array(数组)

    TypeScript Array(数组) 数组对象是使用单独的变量名来存储一系列的值. 数组非常常用. 假如你有一组数据(例如:网站名字),存在单独变量如下所示: var site1="Go ...