样式表的写法：

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 基本的规则写法的更多相关文章

  1. css的命名规则

    本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...

  2. 改变CSS世界纵横规则的writing-mode属性

    改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...

  3. rewrite规则写法及nginx配置location总结

    rewrite只能放在server{},location{},if{}中,并且只能对域名后边的除去传递的参数外的字符串起作用. 例如http://seanlook.com/a/we/index.php ...

  4. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  5. CSS的优先级规则

    CSS的优先级规则有两类 1.位置群组规则 最高优先级为元素内嵌的style样式,如<div style=” “></div> 次高优先级为html头部中的<style& ...

  6. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

  7. CSS命名规范(规则)常用的CSS命名规则

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  8. nginx配置location总结及rewrite规则写法【转】

    转自 nginx配置location总结及rewrite规则写法 | Sean's Noteshttp://seanlook.com/2015/05/17/nginx-location-rewrite ...

  9. 现代 CSS 指南 -- at-rule 规则扫盲

    大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...

随机推荐

  1. hdu5399Too Simple

    //给m个函数 //其相应是自变量x属于{1,2,...n} //f(x)属于{1,2...3} //给出当中一些函数,问有多少种不同的函数集合使得 //1<=i<=n f1(f2(f3. ...

  2. 在Oracle数据库中使用NFS，怎样调优？

    MOS上有好多文章,基本上都跑不了以下三点: Setup can make a big difference 1. Network topology and load 2. NFS mount opt ...

  3. 有oracle 10g，但没有安装arcgis，又想使用空间数据库的解决方案

    我在一台虚拟机中部署系统进行测试,配置如下: OS:WIN2008 R2 SP1 X64 DB: oracle 12c 结果系统报错,查找原因,原来是oracle里还不支持arcgis的一些所谓的空间 ...

  4. 导入别人的Android项目，提示 /Libs/gen already exists but is not a source folder. Convert to a source folder or rename it

    解决方法: 遇到这个问题的解决方法: 1. 右键点击工程,选择 "Properties" 2. 选择左边的 "Java Build Path" 3. 打开 &q ...

  5. 解决多次异步请求紊乱问题 - JavaScript

    加入目前的需求这样的:       左边的菜单链接,点击后通过异步请求返回其HTML代码,然后innerHTML到右面的DIV中,加入切换菜单的速度非常快,最终会导致请求紊乱. 可以加入消息管理机制, ...

  6. 安装oh-my-zsh失败，可按以下方式安装

    参考:https://jingyan.baidu.com/article/8065f87fae247e2330249876.html .打开 iTerm21. .下载 : git clone git: ...

  7. DOS命令汇总

    汇总如下: Dos基础命令梳理思路 小编初来乍道, 不清楚我的插图在我发布后会不会不清晰, 因为我在排版时看到插入的图片是清晰的, 以前见其他条友发布的文章中总有不晰的图片, 很是不爽. 所以如果有不 ...

  8. snnu1111(子序列求和)

    1111: 子序列求和 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 10  Solved: 2[Submit][Status][Web Board] [ ...

  9. 使用maven新建类目录是，报错The folder is already a source folder.的解决办法

    转自:https://www.cnblogs.com/loger1995/p/6539139.html 我们有时候新建一个webapp的maven项目时,生成的目录结构是这样子的: 缺少maven规范 ...

  10. 关于zookeeper的集群搭建

    在所有机器上安装完zookeeper之后, 开始进行集群的搭建 1. 修改 ../zookeeper/conf/zoo.cfg 文件 tickTime=2000 dataDir=/usr/local/ ...