Css 基本的规则写法

样式表的写法：

css的语法由一些标志构成，就是一个基本的样式表由选择器，属性和属性值构成。
Css有标准的写法规则
标准的css写法：
h1 {
Font-family:黑体;
}

h1:表示选择符
Font-family:表示属性，这里的作用是定义字体
"黑体":这里是属性值
将属性和属性值结合在一起，这样的形式称为声明语句。声明语句可以有很多句，所有的声明语句都要放在{}内。（声明语句的结尾不能遗漏英文分号;）

Css 的样式表的引用要在<style>标签中声明

（给选择器命名的时候，不能使用数字开头，必须以字母或者下划线开头）

使用class和标志链接样式：

<html><head><title>类选择器和标志选择器</title><style type="text/css">.style1{//这是class选择器的定义样式color:red;font-size:16px;}#style2{//这是id选择器的定义样式color:blue;font-size:16px}</style></head><body><h3 class="style1">使用 class选择器 的红色字体</h3><h3 id="style2">使用 id选择器 的蓝色字体</h3></body>
</html>

注意，class选择器可以被用于多个对象被设定成同种css样式的情况。
<h2 class="style1">
<h3 class="style1">是可以的

Id选择器则只能用于一个对象
<h2 id="style1">
<h3 id="style2">是不可以的

创建选择器：
三种基本选择器： html选择器 id选择器 class选择器
Html选择器还可以延伸出派生选择器
多种基本选择器混合使用时定义为分组选择器
还有一种特殊的伪类选择器

HTML选择器：

<html><head><title>HTML选择器的使用</title><style type="text/css">h1{color:#555555;font-size:2.3em;font-family:微软雅黑;}    </style></head><body><h1>HTML选择器的使用<h1></body>
</html>

派生选择器：

<html><head><title>派生选择器的使用</title><style type="text/css">h1 h2{color:red;font-size:1em;font-family:黑体;}    </style></head><body><h1>HTML选择器的使用<h1><h2>HTML选择器的使用</h2><h1><h2>HTML选择器的使用</h2></h1>  <h1>其他文本内容<h2>HTML选择器的使用</h2>其他文本内容</h1>   <!--对“选择器的使用”起作用-->

 </body> </html>

Id选择器
样式表：
#text{
Font-size:1em;
}
将这个样式表绑定到HTML对象的时候
<h1 id="text">….</h1>

Id选择器一样可以有派生选择器：
#text p{
Color:blue;
}
这样，表明样式表只将作用于text对象中所有<p>标签下的内容。
<p id="text">….</p>

Class选择器
类选择器就是对网页样式归类的选择器，样式表的写法是在选择器开头处加上.
.play{
Font:1em;
}

也有派生选择器：
.fancy td{ //<td>标签表示的是表格单元格
Color:#f60;
Background:#666;
}
类名为fancy的元素内部的表格单元格都会以灰色背景显示，文本则是橙色文字。

分组选择器：
如果出现多个选择器定义的内容都是一样的，那么只要用英文逗号隔开：
H1,#text,.lay{
Color:blue;
}

伪类和伪类选择器
伪类选择器并不多，通常是用来定义一些特殊的效果。其写法由一个冒号和一个带有附加条件的属性组成。如超链接就是个典型的伪类选择器。
现介绍:lang的使用

<html><head><style type="text/css">q:lang(smile){quotes:"o(*￣▽￣*)ブ""~"//这里定义了将smile转换的符号}</style></head><body>好吧，展示一个笑脸<p>博君一笑<q lang="smile">祝你愉快</q></p></body>
</html>

补一个东西：

Css中定义class时，中间有空格和没空格的区别是什么？

.example .pp{ color: orange; } .example.pp2 { color: green; }如上面的两个定义一个是中间有空格，一个是中间没空格。

第一个class要这样写生效：<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p> 第二个class要这样写生效：<p class="example pp2">pp2这个class生效</p>

.example .pp = E F 是后代选择器。
.example.pp2 则是在一个元素上，这个元素包括这两个类才会有效果。

.example .pp中间用空格隔开，表示后代选择器，选择的是.example内的.pp。

补充内容来自 <https://www.cnblogs.com/liuting1314521/p/6185020.html>

转载于:https://www.cnblogs.com/wangshen31/p/7911657.html

Css 基本的规则写法相关推荐

css规则的样式构成,Css 基本的规则写法
样式表的写法: css的语法由一些标志构成,就是一个基本的样式表由选择器,属性和属性值构成. Css有标准的写法规则标准的css写法: h1 { Font-family:黑体; } h1:表示选择符 ...
HTML浏览器解析位置错误,各浏览器对CSS错误解析规则的差异及CSS hack.pdf
各浏览器对各浏览器对CSS错误解析规则的差异错误解析规则的差异及及CSS hack 标签标签 :_ , * , -moz-..., -webkit-... , !important, hack, 兼容 ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
CSS将样式规则与HTML元素相关联
CSS通过将规则与HTML元素相关联的方式来工作,这些规则用来控制指定元素的内容如何显示. 一条CSS规则包含两个部分:一个选择器和一条声明. 示例: P{ ------- ----- ...
css样式命名规则(仅供参考)
今天在懒人图库网站(http://www.lanrentuku.com)看到了css样式命名规则,在这里记录一下,方便以后规范命名. 原文地址:http://www.lanrentuku.c ...
css优先级计算规则
2019独角兽企业重金招聘Python工程师标准>>> 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于 ...
css规则可以放在云上,CSS中!important规则的使用方法
CSS中!important规则的使用方法发布时间:2020-06-15 10:53:11 来源:亿速云阅读:129 作者:Leah 这期内容当中小编将会给大家带来有关CSS中!important ...
[css] 说说你对CSS样式覆盖规则的理解
[css] 说说你对CSS样式覆盖规则的理解 1.选择器的权重覆盖: 2.相同选择器的顺序覆盖: 3.行内样式>内联样式>外联样式个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很 ...
git规则写法_3条简单的规则将帮助您成为Git大师
git规则写法 In Ariel's freeCodeCamp article, he lays out three key rules you should follow if you want t ...

Css 基本的规则写法

Css 基本的规则写法相关推荐

最新文章

热门文章