CSS 1. 选择器
1、css的介绍
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
css的优势
1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
CSS的三种引入方式：
行内样式、内部样式表、外部样式表。
一.行内样式
使用style属性引入CSS样式。
示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title> <!-- 内链式；内部样式表 -->
<style type="text/css">
/*h1{
font-size: 30px;
color: red;
}*/
</style> <style type="text/css">
@import url('./css/index.css'); </style>
<!-- 外部样式表；链接式是下面这种（推荐使用）；上边的为导入式 -->
<!-- <link rel="stylesheet" type="text/css" href="./css/index.css"> --> </head>
<body> <!--一般不用内嵌式，不好维护 优先级内嵌式>内链式>外链式-->
<!-- 行内样式， 使用style引入css样式；直接在HTML标签中设置样式如下 -->
<div>
<h1 style='font-size: 10px;color: yellow'>路飞学诚</h1>
<h2>路飞学诚</h2>
</div> </body>
</html>
、<link/>标签属于XHTML,@import是属性css2.
、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
2、基础选择器
id选择器 #
标签选择器，可以选择所有的标签元素；不管标签藏的有多深，都可以选中；选中的是所有的而不是某一个，所以说“共性”而不是特性； 如div标签
通配符选择器 *
类选择器 .
父级没有设置高度，子级可以把父级撑开。
.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
.id选择器
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA
3.类选择器
.所谓类 就是class .类名 class与id非常相似 任何的标签都可以加类
但是类是可以重复的 归类,可以使用同一个类名
.同一个标签中可以携带多个类 用空格隔开 如class="title alex egon xmg"但是后边的类把前边的给遮蔽了，层叠效果被遮盖了。
类的使用 能够决定前端工程师的css水平到底有多牛逼？
一定要有”公共类“的概念
总结：
.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
玩好了类 就等于玩好了css中的1/
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title> <style type="text/css">
/*通配符选择器；左边和上边都没有间距了；加*表示选择所有元素 */
*{
padding: ;
margin: ;
color: #;
} /*id选择器 margin:0 auto;表示在中间显示 */
#container{
width: 968px;
background-color: #C1C1C1;
margin: auto;
} /*元素或叫标签选择器； */
h1{
color:#6D8B00;
}
.content{
width: 968px;
background-color: #D50092;
}
img{
width: 968px;
} /*子代选择器 从ul的直接子元素中找到li标签，设置字体颜色为红色 */
ul>li{
color: red;
}
/*后代选择器 从ul的所有后代中找到a标签，设置字体颜色 */
/*ul a{
color: #27CD00;
}*/
</style>
</head>
<body>
<!--上+中+下布局 -->
<div id="container">
<div class="header">
<h1>路飞学诚</h1>
</div> <div class="content">
<h3>我是内容</h3>
<img src="./images/banner.jpg" alt="">
</div> <div class="footer">
<ul>
<li> <a href="">哈哈哈</a> </li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
3、高级选择器
后代选择器、子元素选择器、交集选择器、并集选择器、通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*div p{ !*后代选择器，作用于所有的后代*!*/
/*color: red;*/
/*}*/
.container div p{ /*后代选择器，中间用空格*/
color: #985f0d;
}
.container>p{ /*子代选择器，仅作用于子元素，孙子的p标签不起作用*/
color: yellowgreen;
}
/*交集选择器，第一个必须是标签选择器，第二个必须是类或者ID选择器*/
h3{
width:300px;
color: red;
}
.active{
font-size: 30px;
} h3.active{
background-color: #5bc0de; }
/*并集（组合）选择器 设置多个标签中的统一样式*/
a, h4{
font-size: 43px;
text-decoration: none; /*文本的修饰，*/
color: #2b542c;
}
/* *通配符选择器，性能有点差，一般不用它*/ </style>
</head>
<body>
<div class="container">
<p>我是第一个段落</p>
<div>
<p>我是第二个div的段落</p>
<a href="#">luffy</a>
</div>
<p>我是另外一个段落</p>
<ul>
<li class="item">
<h3 class="active">我是一个h3标题</h3>
<h4>我是一个h4标题</h4>
</li>
<li>
<h4>我是一个h4标题</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>
群组选择器、交集选择器、毗邻选择器、兄弟（弟弟）选择器、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style type="text/css">
/*群组选择器* 统一宽度，居中，背景颜色，，/
.title,.content,.footer{
width: 968px;
/*height: 300px;*/
margin: auto;
background-color: #BFBFBF;
border: 1px solid red;
} /*交集选择器*/
p.p1{
color: #0DC87A;
}
p#title1{
font-size: 30px;
color: #CF5600;
} /*紧跟着h3标题的标签；毗邻选择器 找到所有紧挨在h3后面的第一个p标签，设置字体颜色*/
h3+p{
color:#D23180;
} /*兄弟选择器 ； 弟弟选择器 找到所有h3标签后面同级的的p标签，设置字体颜色*/
h3~p{
color: #4558C9;
} /*找到所有class=baidu的选择器*/
[class='baidu']{
color: #25CB33;
} /*找到所有class开头是btn的选择器*/
[class$='ault']{
font-size: 20px;
color:#37C8B0;
} /*基础选择器：
1.标签选择器 div
2.类选择器 .div1
3.id选择器 #box
4.通配符选择器 *
高级选择器
1.群组选择器 中间是用,
2.交集选择器 选择器之间不能有空格 ，第一个标签必须是标签选择器，第二个标签可以是id选择器或类选择器
3.后代选择器 选择器之间用空格；（使用很频繁）
4.子代选择器 >
5.毗邻选择器 +
6.兄弟选择器 ～
7.属性选择器 [class='值'] [class^='开头的值'] [class$='结尾的值']
*/ </style>
</head>
<body> <div class="title">
<p class="p1" id="title1">我是一个标题</p>
</div> <div class="content">
<h3>我是3级标题</h3>
<a href="">百度一下</a>
<p>我是一个段落</p>
<h3>我是3级标题</h3>
<p>我是一个段落</p>
<h3>我是3级标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p> </div> <div class="footer"> <a href="" class="baidu"> 百度</a>
<a href="" class="btn-default"> 百度一下</a>
<a href="" class="baidu"> 百度</a> </div> </body>
</html>
4、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
label[for]{
color: red;
font-size: 20px;
}
/*根据属性和值查找*/
label[for='pwd']{
color: yellow;
}
/*以...开头*/
label[for^='vip']{
font-size: 30px;
}
/*以...结尾*/
label[for$='']{
font-size: 40px;
}
/*包含有ser*/
label[for*='ser']{
color: green;
}
input[type='text']{
background-color: purple;
}
</style>
</head>
<body>
<!-- 属性选择器 通常在 表单控件中 使用比较频繁-->
<div class="box">
<form action="">
<label form="user">用户名</label>
<input type="text" name="" id="user"> <!--name的属性跟form的action有关，id是跟label的form=“user”有关 -->
<label for="pwd">密码</label>
<label for="vip1">vip1</label>
<label for="vip2">vip2</label>
<label for="user2">用户名2：</label>
<label for="user3">用户名3：</label>
</form>
</div>
</body>
</html>
5、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box ul li.item1 a:link{ /*没有被访问的a标签超链接的样式; 后代选择器结合交集选择器来选中a标签 */
color:#666;
}
.box ul li.item2 a:visited{ /*访问过后的a标签超链接的样式*/
color: yellow;
}
.box ul li.item3 a:hover{ /*鼠标悬停时超链接的样式*/
color: #2aabd2;
}
.box ul li.item4 a:active{ /*鼠标点住不松手的时候a标签超链接的样式*/
color:#c9302c;
} /*'爱恨原则' love hate 一定要先love再hate*/ div ul li:first-child{ /*选中第一个元素*/
font-size: 20px;
color: red;
}
div ul li:last-child{ /*选中最后一个元素*/
font-size: 20px;
color: #985f0d;;
}
div ul li:nth-child(3){ /*选中当前指定的元素 数值从1开始*/
font-size: 30px;
color: #2aabd2;
}
div ul li:nth-child(n){ /* n表示选中所有 从0开始的 0的时候表示没有选中*/
font-size: 35px;
color: darkred;
}
div ul li:nth-child(2n){ /*偶数*/
color: mediumvioletred;
}
div ul li:nth-child(2n-1){ /*奇数*/
color: yellow;
}
div ul li:nth-child(3n+1){ /*隔几换色 隔行换色 隔2行换1 */
color: #2aabd2;
}
input:focus{ /*获取焦点时的样式*/
background-color: transparent;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1<a href="#">张三</a>
</li>
<li class="item2">
2<a href="#">李四</a>
</li>
<li class="item3">
3<a href="#">王五</a>
</li>
<li class="item4">
4<a href="#">赵六</a>
</li>
<li class="item5">
5<a href="#">钱李</a>
</li>
<li class="item6">
6<a href="#">嘿哒</a>
</li>
</ul> <form>
<input type="text" name="">
</form>
</div> </body>
</html>
6、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:first-letter{ /*设置第一个首字母的样式，为文本首字母设置特殊样式*/
color: #c9302c;
font-size: 25px;
}
p:before{ /* 在....之前添加内容,这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
content: 'alex';
}
p:after{ /*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
content: '&';
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<p>我是一个段落哦</p>
</body>
</html>
css的继承性
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素
像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
.father{
font-size: 30px;
color: #c9302c;
background-color: #2aabd2; }
.child{
color:rebeccapurple;
}
</style>
</head>
<body>
<div class="father" id="egon">
<div class="child">
<p>alex</p>
</div>
<p>小马哥</p>
</div>
</body>
</html>
css的层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
#box1 #box2 p{ /*2 0 1*/
color:yellow;
}
#box2 .wrap3 p{ /*1 1 1*/
color: rebeccapurple;
}
div div #box3 p{ /*1 0 3*/
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{ /*0 3 4*/
color: blue;
}
</style>
<!--
层叠性： 权重大的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 非常简单 数数，谁的数量多就选谁，就不用接着看后边的数量了
id的数量 class的数量 标签的数量
-->
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>我是什么颜色了</p>
</div>
</div>
</div>
</body>
</html>
层叠性相同时处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1 1 1 */
/*#box2 .wrap3 p{
color: yellow;
}*/
/*1 1 1*/
/*#box1 .wrap2 p{
color: red;
}*/ /* 0*/
/*继承来的*/
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2 .wrap3{
color: green;
} /*选中来的*/
/*1 1 1*/
/*#box2 .wrap3 p{
color: green;
}*/ </style>
</head>
<body> <!-- 当权重一样的时候 是以后设置的属性为准。 前提权重一样 ，后来者居上。
继承来的属性 权重为0 总结：
1.先看标签元素有没有被选中，如果选中了（最内层标签），就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则"：谁描述的近，就显示谁的属性 -->
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css"> #div1{
background-color: #2E2FCC;
} .box{
background-color: #00CC3C;
} div{
width: 200px;
height: 200px;
background-color: red;
} </style>
</head>
<body> <!-- 优先级id >类 >标签 -->
<div id="div1" class="box" >哈哈</div>
</body>
</html>
CSS 1. 选择器的更多相关文章
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css后代选择器（div.class中间不带空格）
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS 类选择器
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
随机推荐
- 六道JavaScript测验题
1.找出数字数组中最大的元素(使用Match.max函数) var a=[123,23432,345,3,34]; console.log(Math.max.apply(null,a)); 2.转化一 ...
- （转）MFC界面风格
以前在XP写的程序,现在系统换成了WIN7,现在对话框在编辑和预览的时候显示都如图一所示,可实际编译生成之后的显示却如图二所示,是什么问题?如何设置两者的显示风格使其保持一致? ----------- ...
- JavaScript之不规则Table转化为可定点索引td节点的网格矩阵【插件】
由于解析课程表的缘故,有如下需求: 1. 将任意表格解析成独立的单元格矩阵[本次博文的缘由] 2. 根据矩阵坐标,确定任意一格的节点 /* 表格-->网格化 标记表格的位置及其对应的节点 * ...
- Dubbo——基于Zookeeper服务框架搭建及案例演示
一.了解SOA微服务架构 在大规模服务化之前,应用可能只是通过RMI或Hessian等工具,简单的暴露和引用远程服务,通过配置服务的URL地址进行调用,通过F5等硬件进行负载均衡. (1) 当服务越来 ...
- springboot系列八、springboot整合kafka
背景: 当业务在同一时间出现高并发的时候,这个时候我们不想无限的增加服务器,但是又想提高吞吐量.这时可以考虑使用消息异步处理,进行消峰填谷:同时还可以降低耦合度.常见的消息中间件有kafka,rabb ...
- 【转】Oracle 11g安装图文攻略
一.Oracle 下载 注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要出现中文,也不要出现空格等不规则字符. 二.Oracle安装 1. ...
- 红黑树与AVL树
概述:本文从排序二叉树作为引子,讲解了红黑树,最后把红黑树和AVL树做了一个比较全面的对比. 1 排序二叉树 排序二叉树是一种特殊结构的二叉树,可以非常方便地对树中所有节点进行排序和检索. 排序二叉树 ...
- SpringMVC中fastjson支持jsonp的实现
前边一篇文章主要说了下前端处理jsonp的方式,这篇主要介绍了后台接收和响应jsonp的一种方式 继承fastjson消息转换器类:com.alibaba.fastjson.support.sprin ...
- centos7 Firewalld操作集合
=============================================== 2019/4/15_第1次修改 ccb_warlock == ...
- 轻松读懂MSIL
原文:http://www.cnblogs.com/brookshi/p/5225801.html