HTML|CSS之CSS选择器及样式

知识内容:

1.CSS选择器

2.CSS常用样式

参考：http://www.cnblogs.com/yuanchenqi/articles/5977825.html

一、CSS选择器

1.基础选择器

通用元素选择器 *: 匹配任意元素
标签选择器：匹配所有指定标签的样式
id选择器：根据指定的id匹配标签
class类选择器：根据指定的class匹配标签

注: 可以对块级标签设置长宽，不可以对内联标签设长宽（它只会根据他的文字大小来变）；另外一个id只能作用于一个标签，一个class可以作用于多个标签，id类似一个人的身份证号，class类似一个人的名字，身份证号是不能重复的，但是名字可以重复，同理id不能重复，class可以重复

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>基础选择器</title>

     <style>

         /*标签选择器*/

         body{

             background: #b6bbb2;

         }

         div{

             background: #747F8C;

             color: red;

         }

         /*id选择器*/

         #h1{

             color: #501c56;

         }

         /*class选择器*/

         .c1{

             background: #2d4ca2;

             color: #41db50;

         }

     </style>

 </head>

 <body>

 <h1 id="h1">id</h1>

 <div>

     <p>内容1</p>

 </div>

 <span class="c1">class1</span>

 <div>

     <p>内容2</p>

 </div>

 <span class="c1">class1</span>

 <span class="c1">class1</span>

 </body>

 </html>

效果如下：

2.层级选择器

.c1 .c2 div{background-color:red;}，各级之间用空格隔开，各级之间是上下级关系，实例如下:

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>层级选择器</title>

     <style>

         /*以下3种写法效果是一样的*/

         /*

         span div{

             background: #2d4ca2;

         }

         .c1 div{

             background: #2d4ca2;

         }

         */

         .c1 #c2{

             background: #2d4ca2;

         }

     </style>

 </head>

 <body>

 <div class="c1">3306</div>

 <span class="c1">

     sdfasf

     <div id="c2">asdf</div>

 </span>

 <div class="c1">555666</div>

 </body>

 </html>

效果如下:

3.组合选择器

input,div,p{ background-color:red; }，各级之间用逗号隔开，各级之间是并列的关系

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>组合选择器</title>

     <style>

         #i1, #i2, #i3{

             background: #2d4ca2;

             color: #41db50;

         }

     </style>

 </head>

 <body>

 <div id="i1">第一行</div>

 <div id="i2">第二行</div>

 <div id="i3">第三行</div>

 </body>

 </html>

效果如下:

嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素(div可包含span但span中不可包含div)
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列

4.属性选择器

input[type]，选择具有type属性的input标签

input[type='text']{ width:100px; height:200px; }，对选择到的标签再通过属性再进行一次筛选，选择type属性等于text的input标签

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>属性选择器</title>

     <style>

         input[type="text"]{

             width:100px;

             height: 200px;

         }

     </style>

 </head>

 <body>

 <input type="text">

 <input type="password">

 </body>

 </html>

效果如下:

5.伪类

(1)CSS伪类是用来给选择器添加一些特殊效果

 a:link（没有接触过的链接）,用于定义了链接的常规状态

 a:hover（鼠标放在链接上的状态）,用于产生视觉效果

 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接

 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态

 a:link {color: #FF0000}     /* 未访问的链接 */

 a:visited {color: #00FF00} /* 已访问的链接 */

 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

 a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

(2)focus伪类

 :focus  input标签获取光标焦点

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>focus</title>

     <style>

         .container{

             width: 600px;

             height: 350px;

             margin: 0 auto;

             border: 1px solid red;

         }

         .form{

             margin-top: 135px;

             text-align: center;

         }

         input.text{

             margin-bottom: 10px;

         }

         input.text:focus{

             color: #8c3d41;

             background-color: grey;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <span>搜索框</span>

     <div class="form">

         <form action="">

             <input type="text" class="text">

             <br/>

             <input type="submit" value="搜索" class="submit">

         </form>

     </div>

 </div>

 </body>

 </html>

focus实例

(3)before after伪类

:before

:after

 p:before        在每个 <p> 元素的内容之前插入内容                    p:before{content:"hello";color:red}

 p:after         在每个 <p> 元素的内容之前插入内容                    p:after{ content:"hello"；color:red}

(4)hover实例

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hover示例</title>

     <style>

         body{

             margin: 0 auto;

         }

         a{

             text-decoration: none;

         }

         .pg-header{

             height: 38px;

             line-height: 38px;

             width: 100%;

             background-color: #5d48ff;

         }

         .w{

             width: 980px;

             margin: 0 auto;

         }

         .pg-header .log{

             color: #8c3d41;

         }

         .pg-header .menu{

             display: inline-block;

             padding: 0 10px;

             color: white;

         }

         /*当鼠标移动到标签上时以下CSS才生效*/

         .pg-header .menu:hover{

             background-color: #501c56;

         }

     </style>

 </head>

 <body>

 <div class="pg-header">

     <div class="w">

         <a href="" class="logo">Logo</a>

         <a href="" class="menu">全部</a>

         <a href="" class="menu">42区段子</a>

         <a href="" class="menu">1024</a>

     </div>

 </div>

 </body>

 </html>

hover实例

6.CSS优先级与继承

(1)CSS优先级

CSS优先级从高到低如下

 style=""  1000

 #id 　　  100

 .class 　 10

 p 　　　   1

(2)CSS的继承性

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0

只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式

此外，继承是CSS重要的一部分，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等

二、CSS常用样式

1.通用属性

(1)color

颜色属性被用来设置文字的颜色:

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

(2)text-align

text-align规定元素中的文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间，水平方向居中
justify 实现两端对齐文本效果。

(3)line-height

line-height: 标签高度垂直方向根据标签高度居中

(4)其他

height 高度: 像素,百分比
width 宽度: 像素,百分比
text-align:ceter 水平方向居中
text-indent 首行缩进
text-decoration 装饰(去除a标签的下划线 text-decoration:none;)
font-family 字体种类
font-style 字体样式
font-size 字体大小
font-weight 字体粗细

注: height不存在绝对的百分比，只存在相对的百分比，也就是说最外层的height无法设置百分比，只有父标签设置了height子标签才能设置

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>边框</title>

     <style>

         body{

             margin: 0 auto;

         }

         .c1{

             /*margin-left: 30px;*/

             width: 300px;

             height: 100px;

             border: 3px solid red;

             /*设置字体大小*/

             font-size: 30px;

         }

         .c2{

             /*margin-left: 30px;*/

             width: 80%; height: 48px;

             border: 3px dashed green;

             /*左右居中(水平居中):*/

             text-align: center;

             /*上下居中(垂直居中)*/

             line-height: 48px;

             /*加粗*/

             font-weight: bold;

         }

     </style>

 </head>

 <body>

 <div class="c1">ssfasfasf</div>

 <br>

 <div class="c2">sfasfasfasfwefv!</div>

 </body>

 </html>

效果如下：

2.边框

通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素

边框设置：

宽度(border-width)，样式(border-style)，颜色(border-color) border: 4px dotted red;
border-left,border-right,border-top,border-bottom

 border-style: solid;

 border-color: red;

 border-width: 10px;

 简写：border: 10px red solid;

常用边框样式：

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>边框</title>

     <style>

         body{

             margin: 0 auto;

         }

         p{

             margin-left: 30px;

             width: 300px;

             height: 100px;

         }

         .c1{

             border: 3px solid red;

         }

         .c2{

             border-top: 3px dashed green;

             border-bottom: 3px dashed red;

             border-left: 3px dotted #804761;

             border-right: 3px dotted blue;

         }

     </style>

 </head>

 <body>

 <p class="c1">这是一句话</p>

 <br>

 <p class="c2">最后一句话!</p>

 </body>

 </html>

效果如下：

3.float

float: left/right/none;

浮动的特性：

浮动会脱离文档
浮动可以内联排列
浮动会导致父元素高度坍塌

详细内容：https://www.cnblogs.com/wyb666/p/9443590.html

4.display

display: none; -- 让标签消失
display: inline; -- 行内元素有多少占多少无法设置宽高
display: block; -- 块级元素独占一行可以设置宽高
display: inline-block; -- 既有inline的属性也有block属性
具有inline,默认自己有多少占多少
具有block，可以设置高度，宽度，padding margin

详细内容：https://www.cnblogs.com/wyb666/p/9443562.html

5.盒模型

padding -> 内边距(内容与边框之间)
margin -> 外边距(标签与标签之间)

 margin:         用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的

 padding:        用于控制内容与边框之间的距离；

 Border(边框)    围绕在内边距和内容外的边框。

 Content(内容)   盒子的内容，显示文本和图像。

注：两个挨着的margin浏览器最后会取其中的最大值

更多详情看此：https://www.cnblogs.com/wyb666/p/9456033.html

6.background背景属性

在HTML中可以直接给body设置背景如下所示

 <body background=图片文件名>

CSS中的背景设置如下：

 background-color: cornflowerblue    ->  指定背景颜色

 background-image: url('1.jpg');      ->  指定背景图片

 background-repeat: no-repeat;(repeat:平铺满)   ->  指定背景重复方式(no-repeat;repeat-x;repeat-y)

 background-position: right top（20px 20px）;  -> 指定背景位置(横向：left center right 纵向：top center bottom )

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>background</title>

     <style>

         .back{

             width: 1500px;

             height: 1500px;

             background-repeat: no-repeat;

             background-image: url("test.png");

             /*background-position: center;*/

             background-position: 0 center;

         }

     </style>

 </head>

 <body>

 <div class="back"></div>

 </body>

 </html>

background背景样式

抽屉图标background设置:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span{

             /*display: inline-block; -> 既有块级也有内联标签的属性!*/

             display: inline-block;

             width: 18px;

             height: 20px;

             background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");

             background-position: 0 -100px;

         }

     </style>

 </head>

 <body>

     <span></span>

 </body>

 </html>

7.列表属性

 ul,ol{

 list-style: none; /*去掉样式*/

 list-style: circle;

 list-style: disc;

 list-style: upper-alpha;

 、、、

 }

8.position属性(定位)

 position 属性用于元素定位:

     static            默认

     relative          相对定位，相对于自己本来应该在的位置

     absolute          绝对定位，行为有点奇怪

     fixed             固定定位，基于 window 的绝对定位, 不随页面滚动改变
  非 static 元素可以用 top left bottom right 属性来设置坐标 非 static 元素可以用 z-index 属性来设置显示层次
  relative 是相对定位 absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到 非 static 的元素

详细内容：https://www.cnblogs.com/wyb666/p/9443662.html

9.CSS补充内容

(1)overflow -> 隐藏溢出

overflow: hidden; //超过范围隐藏

overflow: auto; 　//超出加滚动条　

overflow: scroll; //不管如何都带滚动条

(2)下划线

去掉下划线：text-decoration: none ;
加上下划线： text-decoration: underline;

 /*清除a标签的下划线*/

 a{

      text-decoration: none;

 }

(3)居中显示

针对block元素居中：

指定block元素宽度
然后指定margin 0 auto

 <!--__author__ = "wyb"-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>居中显示</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .content-box{

             width: 100%;

             height: 800px;      /*实际中可以不用设置*/

         }

         .content{

             margin: 0 auto;

             width: 800px;

             height: 800px;      /*实际中可以不用设置*/

             background-color: #747F8C;

         }

     </style>

 </head>

 <body>

 <div class="content-box">

     <div class="content"></div>

 </div>

 </body>

 </html>

居中显示

针对inline元素和inline-block元素居中：设置父元素的text-align属性为center

(4)隐藏的两个方法

display:none; #隐藏了会顶上去
visibility :hidden; #隐藏了不会顶上去

(5)透明度设置及层设置

opacity: 0.5;　　//设置透明度

z-index: 10;　　//设置层(只能作用于定位过的元素!)

(6)清除浏览器默认的margin和padding
*{
margin: 0;
padding: 0;
}

(7)内联标签position设置

如果内联标签position设置为absolute或relative，此时内联标签可以直接设置长和宽而不用再设置display为inline-block

HTML|CSS之CSS选择器及样式的更多相关文章

Css - 选择器和样式
Css - 选择器和样式标签选择器即使用html标签作为选择对象 <style> div{ background:red; } </style> <div&g ...
css选择器，样式表导入
css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 ...
认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式链接伪类的顺序 : ...
使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节查看作业目录需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...
css伪类选择器及伪元素选择器
1.类选择器在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
Lining.js - 为CSS提供 ::nth-Line 选择器功能
在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

随机推荐

hadoop之HDFS运行小观察
hadoop 是当前很火的一个大数据运行框架和平台, 对于这个神奇的大家伙我甚是搞不清楚,前段时间闲来无视便把 HADOOP 运行起来, 看着它的操作记录存储部分(操作日志), IMAGE 记录着 ...
Http常见状态码说明
一些常见的状态码为: 200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解: 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码.代码说明100 ...
VS2013、VS2015中，新建项目没有看到解决方案的问题（已解决）
问题描述:装好VS2013 专业版 for Update5不知怎么弄的,突然新建项目没有了解决方案,于是各种折腾,最后终于解决了! ================================== ...
在windows下制作mac os x的启动安装U盘
前几天有幸用了下Macbook pro,可在给它装win 7系统时,无知而又手贱地在windows系统下分区了:( 然后再重启就找不到Mac os x,只有win 7了.可进win 7也不正常,直接给 ...
ZH奶酪：Python 中缀表达式转换后缀表达式
实现一个可以处理加减乘数运算的中缀表达式转换后缀表达式的程序: 一个输入中缀表达式inOrder 一个输出池pool 一个缓存栈stack 从前至后逐字读取inOrder 首先看一下不包含括号的: ( ...
linux系统的启动过程及系统初始化
(其中/etc/inittab是一个很重要的文件,值得细究http://www.2cto.com/os/201108/98426.html) 其开头的446字节内容特指为"主引导记录&quo ...
Effective C++：条款23：宁以non-member、non-friend替换member函数
(一) 有个class来表示网页浏览器: class WebBrowser { public: void clearChache(); void clearHistory(); void remove ...
bat生成vbs通过注册表禁用或启用USB端口
在网上找到的资料,经过自己简单的修改调整,通过bat生成vbs文件,由vbs文件操作注册表的键值,达到启用和禁用USB端口的目的. 当然,你也可以完全使用BAT操作注册表来完成修改注册表的键值的目的, ...
解决python2安装MySQL-python模块报错
今天电脑重装系统,所有软件都重装一遍,MySQLdb模块一直装不好,纠结了好久,终于解决,方法分享给大家. MySQLdb模块安装: 1.下载MySQL-pyhon模块,网站为:https://pyp ...
01.ubuntu14.04安装HI3518EV200 SDK的过程
转载,侵删 1.海思SDK安装编译 Hi3518EV200_SDK是基于Hi3518EV200_DMEB的软件开发包,包含了在Linux相关应用开发时使用的各种工具及其源代码,是用户开发中最基本的软件 ...

HTML|CSS之CSS选择器及样式

HTML|CSS之CSS选择器及样式的更多相关文章

随机推荐

热门专题