CSS层叠样式表-选择器

一、css层叠样式表的三种形式

1.行内样式表

2.内部样式表

3.外部样式表

二、CSS选择器

1.标签选择器

例：

<head>

<title>Document</title>

<style>

color: red;

}

</style>

</head>

<body>

<p>我是p标签</p>

</body>

</html>

效果：

id选择器

通过 id可以找到指定的元素。

id类似于身份证号，一个id值，只能给一个标签使用，即通过id选择器，只能选择一个标签。

例：

<style>

#red{

color: red;

}

#blue{

color: blue;

}

</style>

<p id="red">id选择器</p>

<p id="blue">id选择器</p>

<p>id选择器</p>

效果：

3.类选择器

类名的命名规则：可以是字母、数字、下环线、中划线组成，但是不能以数字和中划线开头命名。

一个标签可以有多个类。（class="类名1 类名2 类名3"）

例：

<style>

.red{

color: red;

}

.blue{

color: blue;

}

.fs30{

font-size: 30px;

}

</style>

效果：

4.原子类

在做网页项目之前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。

例：

.fs12{ .color-red{

font-size: 12px; color: red;

} }

.fs14{ .color-blue{

font-size:14px; color: blue;

} }

5.通配符选择器

找到的是页面上所有的元素，一般用于去除标签默认的内外边距。

例：

margin: 0;

padding: 0;

}

CSS层叠样式表-选择器相关推荐

css层叠样式表、基本选择器
文章目录系列文章目录前言一.css层叠样式表 1.css组成 2.css引入方式 3.文字样式 4.文本属性二.选择器 1.基本选择器 2.最高样式引入 3.伪链接选择器 4.伪结构选择器 5 ...
前端笔记（3）css，选择器，文字文本属性，外观属性
CSS样式表(1) (1)css概念引入css的三种方法行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器标签选择器类选择器 id选择器 ...
CSS节选——选择器
CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:targ ...
Web前端——CSS层叠样式表
>css概述:层叠样式表样式:调整HTML的显示效果(大小,颜色,对齐,边框,阴影,行高,文本样式,文字,阴影,内填充,外边距,定位,过渡,动画) HTML中就可以进行一些基本的样式调整,cs ...
html css三类选择器,css三类选择器用法引用
css(层叠样式表): css用法:选择符{样式属性:取值;...} css选择器的分类: ①:标签选择器,such as:p{attribute:value;},p为标签选择器的name,该页面中所 ...
CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
css:层叠样式表(全)
css:层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,解决了内容与表现分离的问题,通常存储在css文件中. 目录: css属性,继承,引用等选择器盒模 ...
Css3学习日志 --css层叠样式表
学习目标: 掌握css层叠样式表基础教程 CSS语法.选择器.字体样式.边框.背景.图片格式详解学习内容: css样式规则基本语法: A{属性:值; 属性:值; } 1.选择器用于指定css样式作 ...
CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...

CSS层叠样式表-选择器

CSS层叠样式表-选择器相关推荐

最新文章

热门文章