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>
Css 基本的规则写法的更多相关文章
- css的命名规则
本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...
- 改变CSS世界纵横规则的writing-mode属性
改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...
- rewrite规则写法及nginx配置location总结
rewrite只能放在server{},location{},if{}中,并且只能对域名后边的除去传递的参数外的字符串起作用. 例如http://seanlook.com/a/we/index.php ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- CSS的优先级规则
CSS的优先级规则有两类 1.位置群组规则 最高优先级为元素内嵌的style样式,如<div style=” “></div> 次高优先级为html头部中的<style& ...
- div+css样式命名规则,值得收藏
div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- nginx配置location总结及rewrite规则写法【转】
转自 nginx配置location总结及rewrite规则写法 | Sean's Noteshttp://seanlook.com/2015/05/17/nginx-location-rewrite ...
- 现代 CSS 指南 -- at-rule 规则扫盲
大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...
随机推荐
- hdoj 1203 I NEED A OFFER! 【另类01背包】【概率背包】
题意:... 策略:动态规划. 由于是求至少能得到一个offer的概率,那我们能够反着求.求得不到一个offer的概率.最后用1减去就好了. 代码: #include<string.h> ...
- 深入浅出Redis(三)高级特性:管道
Redis是一个响应式的服务,当client发送一个请求后,就处于堵塞状态等待Redis返回结果. 这样一次命令消耗的时间就包含三个部分:请求从client到server的时间.结果从server到c ...
- Hdfs的ACL測试
Hadoop从2.4.0版本号開始支持hdfs的ACL,在CDH5.0其中也集成了该特性,以下对其进行一些測试: unnamed user (file owner) 文件的拥有者 unnamed gr ...
- LoadRunner中存储表格参数------关联数组
主要用到 web_reg_save_param_ex函数("Scope=All",), sprintf( CProdNo,"{CProdNo_%d}",i ); ...
- 《modern operating system》 chapter 6 DEADLOCKS 笔记
DEADLOCKS Both processes are blocked and will remain so forever. This situation is called a deadlock ...
- 设置一个DIV块固定在屏幕中央(两种方法)
设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...
- mongodb01--安装
配置Mongo服务端 安装MongoDB 1.按照操作系统下载http://www.mongodb.org/downloads. 2.在D盘新建MongoDB文件夹(此文件夹为自定义的数据库安装目录D ...
- RK3288以太网的mac地址调试笔记【学习笔记】【原创】
平台信息:内核:linux3.1.0系统:android/android6.0平台:RK3288 作者:庄泽彬(欢迎转载,请注明作者) 邮箱:2760715357@qq.com 说明:提供以太网mac ...
- bzoj1835: [ZJOI2010]base 基站选址
新的一年新的开始.结果第一题就用了几乎一周.而且感觉很不好. 先检讨自己.最近写的各种数据结构模板基本没打过出来,各种细节崩盘,这题线段树都居然被lazy标记没清零卡挂. DP还是博大精深,这东西感觉 ...
- add environment path to powershell
https://4sysops.com/archives/use-powershell-to-execute-an-exe/ https://stackoverflow.com/questions/7 ...