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
这段文字都继承了由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 这样的选择器.实际 ...
随机推荐
- Java项目体验
1. JAVA开发环境安装和配置 a) 下载JDK(Java Development Kit) b) 安装JDK. JRE(Java Runtime ...
- knowledge 开源知识管理系统
knowledge 是一个不错的知识管理系统,基于markdown 我们可以方便的进行知识的标签 以及展示 使用docker-compose 运行 环境准备 docker-compose 文件 ver ...
- visual studio 2014 新特性
原文如下: Visual Studio "14" CTP Today, we are making available a first community technology p ...
- [CLPR] 定位算法探幽 - 边缘和形态学
一. 引言 如何从一副图片中找到车牌? 这是机器视觉的一个应用. 理所当然地, 思考的角度是从车牌本身的信息入手, 为了讨论方便, 下面均以长窄型蓝白车牌为例. 下图就是这样一张车牌的基本信息. 一眼 ...
- [C++] Win32 API 的多线程Timer管理Trick - 利用PostThreadMessage
有时候我们需要在程序里定时地完成一些任务, 比如5秒后发送, 10秒后弹窗之类的操作. 这就需要一个类似于定时器的组件. 这个组件在windows.h里被称为Timer. 设置一个Timer 第一步当 ...
- 【柚子木字幕組】【BBC】 Are Our Kids Tough Enough? Chinese School 英國的孩子足夠堅強嗎？中式教學
https://www.youtube.com/watch?v=ypT6c4NZ6jk 最近很火的一个bbc纪录片 讲的是英国学校请几个中国老师到他们那里试行中国教育的故事 作为学习英文的素材很不错
- commons-logging log4j logback 知识点
log4j 2,需要导入2个jar包: log4j-core-xx.jar log4j-api-xx.jar log4j 2 的 properties 配置文件名字为: log4j2.properti ...
- Angular 4 路由守卫
路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...
- Microsoft Dynamics CRM 4.0 如何添加自定义按钮
一.通过导入导出ISV.Config(ISV配置),具体如下图: 先设置—>打开导出自定义项—>选择ISV配置—>选择导出所选自定义项 点击确定 保存到桌面,解压,用VS打开cust ...
- OpenWrt在没有Luci时刷机
scp上传bin文件到root文件夹下. sysupgrade openwrt-ar71xx-generic-dragino2-squashfs-sysupgrade.bin 等待重启