前端 --- 2 css
一. CSS的几种引入方式
1.行内样式
2.内部样式
写在网页的<head></head>标签对的<style></style>标签对中
3.外部样式
（1）标签选择器
将css写在一个单独的文件中
调用（在head中调用）
（2）id选择器
css文件中
调用
（3）类选择器
文件中
调用
二.高级选择器
1.子类选择器
用 大于号
选择的是前一级标签的子标签
2.后代选择器
用 空格
选择的是前一级标签的后代标签
3.毗邻选择器
4.弟弟选择器
5.并集选择器
用 逗号
选择的所有标签 共性元素
body,h1,h2,,li,pre,form,textarea,th,td{
margin:0;
padding:0
}
6.交集选择器
开头是标签名，后面跟id或类选择器
（中间没有空格）
7.通用选择器
用 * 号
选择所有标签
8.属性选择器
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
} /*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
} /*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
} 不怎么常用的属性选择器
9.伪类选择器
①
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
} /* 选定的链接 */
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
②
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
} /*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
} /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
} /*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/ div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
10.伪元素选择器
①
②
③
三.选择器的优先级
1.继承性
给父级设置一些属性，子级继承了父级的该属性
有一些属性是可以继承下来 ： color 、 font-、 text-、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
2.层叠性
权重的标签覆盖掉了权重小的标签
①权重（用不进位）
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./03-css继承.css">
</head>
<body> <div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div> </body>
</html>
css:
/*权重问题*/
/*!*2 0 1*!*/
/*!*id 类 标签 *！*/
#box1 #box2 p{
color: yellow;
}
/*!*1 1 1 *!*/
#box2 .wrap3 p{
color: red;
}
/*!*1 0 3*!*/
div div #box3 p{
color: purple;
}
/*!*0 3 1*!*/
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
/*结果是黄色*/
② 权重相同时
第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同
#box2 .wrap3 p{
color: yellow;
}
#box1 .wrap2 p{
color: red;
}
我们会发现此时显示的是红色的。
第二种现象： 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。
第二个选择器选中了内层标签，有权重。
所以 继承来的元素 权重为0。跟选中的元素没有可比性。
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
我们会发现此时显示的是绿色的。
第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
显示为红色
前端 --- 2 css的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇：web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- servlet 的servletContext
- 发布网站配置文件和SSL
1.将cert下新建一个文件将所有证书文件放在新建的文件下 例如:cert/medcard 2.配置网站的.conf文件 <VirtualHost *:443> ServerName ww ...
- fiddler2抓包数据工具使用教程
一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据,可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求,支持监视.设置断点.甚至修改输入输出数据 ...
- sql 查询每科的前三名
废话不多说,直接上脚本 CREATE TABLE [dbo].[Students]( ,) NOT NULL, ) NULL, ) NULL, [score] [int] NOT NULL, CONS ...
- JSP知识点
1.九大内置对象: request HttpServletRequest类的实例 response HttpServletResponse类的实例 out PrintWriter类的实例,用于把结果输 ...
- VS2010 发布网站时文件丢失解决办法
网站项目中包含了一写rdlc的东西,发布网站选择仅限运行此应用程序所需文件,发布成功后发现这两个文件夹都没发布出来,找了下原因,解决办法是选择文件打开属性窗口找到生成操作,选项选择“内容”,重新发布, ...
- html5-特殊符号的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- c# 设置控件的前景颜色和背景颜色
AutoSize:设置为false取消自动计算尺寸功能,控件的大小则按照设定的Size来呈现,设置为true自动计算大小 TextAlign:设置对齐方式 // // 摘要: // 用默认的所有者运行 ...
- eclipse 依赖别的 工程 断点进不去
maven Debug 发现进不了断点. 点击右键-->Properties-->Java Compiler-->Classfile Generation, 勾选上Add line ...
- 一篇关于蓝牙SDP和L2CAP协议的文章
SDP地址:http://www.cnblogs.com/strive-forever/archive/2011/11/04/2236640.html L2CAP地址:http://www.cnblo ...