伪类选择器对应html哪种标记,CSS的总结(选择器,伪类等...)

主要内容

CSS概述

CSS和HTML结合的四种方式

CSS样式优先级和代码规范

CSS三种常用选择器

CSS三种扩展选择器

CSS的常见操作

CSS概述

CSS (Cascading Style Sheet)是层叠样式表.作用来定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS的优点

1：CSS可以更加精细的控制网页的内容形式。比如说前面的font标签中的size属性，可以用于控制文字的大小，但是，它控制的字体只有7级。 要是出现其他级别的文字，它就实现不了，而css可以办到，它可以任意设置字体的大小。

2：CSS样式是丰富多彩的。

3：CSS的样式定义是灵活多样的。

CSS和HTML结合的方式

sytle属性方式(行内样式)

style标签方式(内嵌样式)

导入方式

链接方式

A：style属性方式：

利用标签中style属性来改变每个标签的显示样式。

例：

p标签段落内容。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

B：style标签方式：(内嵌方式) 在head标签中加入style标签，对多个标签进行统一修改。

p { color:#FF0000;}

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

C：导入方式： 前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。

例：

@import url(css_3.css);

div { color:#FF0000;}

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

D：链接方式： 通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。

例：

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

E：样式优先级： 由上到下，由外到内。优先级由低到高。

CSS样式优先级和代码规范

样式优先级

由上到下，由外到内。优先级由低到高。

代码规范

选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用 分号 隔开

属性与属性值直接按用 冒号 连接

如果一个属性有多个值的话，那么多个值用 空格 隔开。

CSS选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS选择器的类型

html标签名选择器。使用的就是html的标签名

class选择器。其实使用的标签中的class属性

id选择器。其实使用的是标签的中的id属性。

A：每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。 在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

B：class选择器：

在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。

例：

相同标签设置不同样式的时候，用class进行区分。

p.pclass_1 {color:#FF0000;}

p.pclass_2 {color:#0000FF;}

P标签样式

P标签样式

不同标签进行相同设置的时候，用class进行统一定义。 .

classname {color:#00FF00;}

P标签样式

C：id选择器：

与class选择器类似，但格式不同，选择器的名称为：#id值。

例：

#pid { color:#0000FF;}

P标签样式

注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。

CSS扩展选择器

关联选择器

组合选择器

伪元素选择器

A：关联选择器

标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。

例：

p { color:#00FF00;}

p b { color:#FF000;}

P标签刘德华段落样式

P标签段落

B：组合选择器

对多个不同选择器进行相同样式设置的时候应用此选择器。

p,div { color:#FF0000;}

P标签显示段落。

注：多个不同选择器要用逗号分隔开。

C：伪元素选择器

其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。

格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。

a:link 超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态(未点击)。

a:active 点击超链接时的状态。

使用顺序 L – V – H - A

p:first-line 段落的第一行文本。

p:first-letter 段落中的第一个字母。

:focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。

CSS的常见操作

CSS中尺度单位的介绍

字体设置

文本设置

背景设置

列表设置

盒子模型(border margin padding)

定位设置(position,float,clear,z-index)

鼠标样式设置(cursor)

查看CSS帮助文档带领大家做案例

em与px的换算 　　1em=16px, 12px=0.75em

2. font-family

设置字体类型

font-family:"隶书";

font-size

设置字体大小

font-size:12px;

font-style

设置字体风格

font-style:italic;

font-weight

设置字体的粗细

font-weight:bold;

font

在一个声明中设置所有字体属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

font:italic bold 36px "宋体";

多个字体优先级从前到后，字体 有空格一定盯引号引上

body{font-family: Times,"Times New Roman", "楷体";}

3.文本

color

设置文本颜色

color:#00C;

text-align

设置元素水平对齐方式

text-align:right;

text-indent

设置首行文本的缩进

text-indent:20px;

line-height

设置文本的行高

line-height:25px;

text-decoration

设置文本的装饰

text-decoration:underline;

4.背景

background-color

background-image

background-position

background-repeat

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

5.列表

list-style:none

6.定位设置

绝对定位: absolute,它会使得后面的区域发生位置的改变,是相对于body所发生的改变

相对定位:relative ,它是相对原来自己的位置做一下相对偏移

CSS 选择器之基本选择器 属性选择器 伪类选择器

CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

CSS 基础知识点 样式 选择器 伪类

CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

学习css常用基本层级伪类属性选择器

常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

CSS3 选择器——伪类选择器

前面花了两节内容分别在和介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

前端 CSS的选择器 伪类选择器

伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } &lt ...

HTML5新标签使用及CSS选择器(伪类)

这些标签能够让搜索引擎更直接的解析页面内容. 语义:文档或者页面的头部 语义:导航这两者不是组合 ...

前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

CSS设计指南之伪类

伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...

随机推荐

【bzoj1004】 HNOI2008—Cards

http://www.lydsy.com/JudgeOnline/problem.php?id=1004 (题目链接) 题意 n张卡片,染成3种颜色,每种颜色只能染固定张数.给出一些洗牌方案,问染色方 ...

Nova PhoneGap框架 第九章 控件

我们的框架中也提供了一些常用的控件,这些控件大多都依赖于我们的框架,也正是在我们的框架下才使得实现这些控件的变得更简单.但是我们的框架是不依赖与这些控件的,如果你用不上这些控件,你完全可以把相关的代码 ...

DevExtreme 学习应用[1]

DevExtreme学习开发 [1] 用HTML开发手机应用,看一哈帮助文档觉得还很不错. 在开发前一定要安装DevExteme  下载连接地址: ftp://211.101.1.108/DevExp ...

Fragment的使用

1.要在需要使用fragment的Activity布局中添加标签给fragment预留位置: 2.指定fragment对应的类,在类中 ...

virsh创建和恢复快照

virsh创建快照: virsh snapshot-create-as image的名称 snapshot的名称 例如: virsh snapshot-create-as 172.16.1.1_cen ...

如何将两个json合并成一个

//调用方法: var targetObject = [{name:"11",age:11}]; var sourceObject = [{name:"22", ...

js javascript:void(0) 真正含义

我想使用过ajax的都常见这样的代码:here但这儿的void(0) ...

openstack私有云布署实践【17 配置文件部份说明】

Nova部份 cpu_allocation_ratio = 4.0 物理 CPU 超售比例,默认是 16 倍,超线程也算作一个物理 CPU,需要根据具体负载和物理 CPU 能力进行综合判断后确定具体的 ...

Swoft 图片上传与处理

上传 在Swoft下通过 \Swoft\Http\Message\Server\Request -> getUploadedFiles()['image'] 方法可以获取到一个 Swoft\Ht ...

ReactiveX 学习笔记(2)创建数据流

操作符(Operators) Rx 的操作符能够操作(创建/转换/组合) Observable. Creating Observables 本文主题为创建/生成 Observable 的操作符. 这里 ...