CSS基础part1
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义了如何显示 HTML文件中的标签元素，CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector1{property: value;property: value;property: value;
}
selector2{property: value;property: value;property: value;
}示例：
h1{ color:red; font-size:14px;}
CSS引入方法
行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<div style="color: red; line-height: 1.5 !important;">>DIV</div>
嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<head><style>div{color: red;font-size: 30px;font-weight: 800;}p{color: aqua;background-color: bisque;}</style>
</head>链接式
将一个.css文件引入到HTML文件中，如定义文件csstest.css
/*csstest.css，注释行*/
/*该文件内为纯粹的CSS样式代码，不需要style标签声明*/
div{color: red;font-size: 30px;font-weight: 800;
}
p{color: aqua;background-color: bisque;
}示例：
<link rel="stylesheet" href="csstest.css" type="text/css">
导入式
类似于链接式，都是导入外部的css文件
<head><style>@import "csstest.css";</style> </head>
注意：导入式会在整个网页装载完后再装载CSS文件，因此如果网页比较大或网络不稳定则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，这是链接式的优点。
CSS选择器-基本选择器
基本选择器包括：标签选择器、id选择器、class选择器、通配选择器
标签选择器
按照标签名字进行匹配，上述的嵌入式、链接式和导入式使用的css代码所使用的选择器就是标签选择器，会匹配html文件中所有的div标签和p标签进行样式渲染。
id选择器
按照标签的id进行匹配，将匹配到的id进行渲染，每个html文件中的id在根本上就禁止冲突，所以id是唯一的，所以一条css声明只能匹配一个id
示例：
<head><style>/*id选择器*/p2{ background-color: red;}</style>
</head>
<body><p id="p2">I am P</p>
</body>class选择器
同id选择器，只不过是将id名字改成class名字，类不唯一，所以能够匹配多条
示例：
<head> <style>/*类选择器*/.p_ele{background-color: bisque;}</style>
</head>
<body><div class="p_ele">我是第一个p_ele类</div><div class="p_ele">我是第二个p_ele类</div>
</body>通配选择器
匹配所有的html文件中的标签元素
示例：
<head><style>/*通用选择器*/*{background-color: green;}</style>
</head>
<body><p id="p2">I am P</p><div class="p_ele">我是第一个p_ele类</div><div class="p_ele">我是第二个p_ele类</div><p>I am P2</p>
</body>CSS选择器-组合选择器
包括：多元素选择器、后代选择器、子代选择器、毗邻选择器、普通兄弟选择器
后代选择器
<!DOCTYPE html>
<html lang="en">
<head><style>/*后代选择器,指定了一个标签，匹配它下面的所有元素*/.outer p{color: red;}</style>
</head>
<body><div class="outer"><p>p1</p><div class="inner"><p>p2</p></div><p class="p3">p3</p><p>p4</p></div><p>p5</p><div><p>p6</p></div>
</body>子代选择器
<!DOCTYPE html>
<html lang="en">
<head><style>/*子代选择器，指定一个标签，匹配该标签下面的第一级子标签进行匹配渲染*/.outer > p{color: red;}</style>
</head>
<body><div class="outer"><p>p1</p><div class="inner"><p>p2</p></div><p class="p3">p3</p><p>p4</p></div><p>p5</p><div><p>p6</p></div>
</body>多元素选择器
<head><style>/*多元素选择器，匹配包括.inner p（后代）或.p3的元素*/.inner p, .p3{color: red;}</style>
</head>
<body><div class="outer"><p>p1</p><div class="inner"><p>p2</p></div><p class="p3">p3</p><p>p4</p></div><p>p5</p><div><p>p6</p></div>
</body>毗邻选择器
<head><style>/*不常用*//*毗邻选择器，匹配同级的下面一个标签，只会向下找，不会向上找*/.outer+p{color: red;}</style>
</head>
<body><div class="outer"><p>p1</p><div class="inner"><p>p2</p></div><p class="p3">p3</p><p>p4</p></div><p>p5</p><div><p>p6</p></div>
</body>普通兄弟选择器
<head><style>/*不常用*//*普通兄弟选择器，匹配同级的所有元素，只能向下，不能向上匹配*/.outer~p{color: red;}</style>
</head>
<body><div class="outer"><p>p1</p><div class="inner"><p>p2</p></div><p class="p3">p3</p><p>p4</p></div><p>p5</p><div><p>p6</p></div>
</body>补充
<head><style>/*补充，精确匹配，匹配ul标签包含.item类的*/ul.item{color: red;}</style>
</head>
<body><ul class="item"><li>111</li><li>111</li><li>111</li><li>111</li></ul><ol class="item"><li>222</li><li>222</li><li>222</li><li>222</li></ol><ul><li>333</li><li>333</li><li>333</li><li>333</li></ul>
</body>注意，关于标签嵌套：
一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
CSS选择器-属性选择器
标签中的属性可以自己定义，定义的属性可以没有任何功能，只是为了进行匹配查询
匹配所有带有指定属性的元素
<head><style> div[sha]{background-color:red;}</style>
</head>
<body><div class="item1 item2">DIV1</div><div class="C2" id="D2">DIV2</div><div>sha</div><div sha="alex">sha jiejie</div><div sha="yuan alvin">sha jiejie</div><div sha="123">sha gg</div>
</body>匹配所有指定的key:value的元素
<head><style>div[sha='alex']{background-color: green;}</style>
</head>
<body><div class="item1 item2">DIV1</div><div class="C2" id="D2">DIV2</div><div>sha</div><div sha="alex">sha jiejie</div><div sha="yuan alvin">sha jiejie</div><div sha="123">sha gg</div>
</body>匹配一个属性有多个值，只包含其中一个值的属性
<head><style>div[class~='item1']{background-color: blue;}</style>
</head>
<body><div class="item1 item2">DIV1</div><div class="C2" id="D2">DIV2</div><div>sha</div><div sha="alex">sha jiejie</div><div sha="yuan alvin">sha jiejie</div><div sha="123">sha gg</div>
</body>匹配属性值以某个字符串开头的元素
<head><meta charset="UTF-8"><title>Title</title><style>div[sha^='1']{background-color: blue;}</style>
</head>
<body><div class="item1 item2">DIV1</div><div class="C2" id="D2">DIV2</div><div>sha</div><div sha="alex">sha jiejie</div><div sha="yuan alvin">sha jiejie</div><div sha="123">sha gg</div>
</body>匹配属性值以某个字符串结尾的元素
<head><style>div[sha$='3']{background-color: blue;}</style>
</head>
<body><div class="item1 item2">DIV1</div><div class="C2" id="D2">DIV2</div><div>sha</div><div sha="alex">sha jiejie</div><div sha="yuan alvin">sha jiejie</div><div sha="123">sha gg</div>
</body>匹配属性值中包含某个字符串的元素
<head><style>div[sha*='2']{background-color: blue;}</style>
</head>
<body><div class="item1 item2">DIV1</div><div class="C2" id="D2">DIV2</div><div>sha</div><div sha="alex">sha jiejie</div><div sha="yuan alvin">sha jiejie</div><div sha="123">sha gg</div>
</body>CSS选择器-伪类选择器
伪类：伪类指的是标签的不通的状态
anchor伪类
专用于控制链接的显示效果
<head><style>a:link{ /*默认的链接颜色，没有点击过的状态*/color: green;}a:hover{ /*鼠标放到超链接上变色，放到超链接上的状态*/color: goldenrod;}a:active{ /*点击后，即访问的时候变色，点击的状态*/color: blue;}a:visited{ /*超链接访问成功过一次后变色，访问后的状态*/color: red;}</style>
</head>
<body><a href="#">URL</a> /*井号为不跳转页面，只为当前测试使用*/
</body>注：hover并不是链接专有的属性
<head><style>.a{height: 100px;width: 400px;background-color: blue;}.b{height: 200px;width: 200px;background-color: gold;}.all{width: 1000px;border: 1px solid red;}/*当鼠标放到.all类的div范围内，.a的div变色，注意操作的标签一定是被包含在内的子元素*/.all:hover .a{background-color: bisque;}/*.b:hover .a{*//*background-color: plum;*//*}*/</style>
</head>
<body><div class="all"><div class="a">AAAAAAAAA</div><div class="b">BBBBBBBBB</div></div>
</body>hover示例
before/after伪类
:before 在元素之前插入内容
:after 在元素之后插入内容
<head><style>div:before{content:"hello"; /*插入的值*/color:red;display: block; /*设置为块级*/}p:after{ /*默认为内联*/content:"byby"; /*插入的值*/color:blue;}</style>
</head>
<body><div>divdiv</div><p>hi</p>
</body>一般用于布局使用
选择器优先级
优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
示例：可以再加一个行内式测试
<head><style>p{color: red;}#d1{color: gold;}.c1{color: green;}</style>
</head>
<body><p class="c1" id="d1">PPP</p>
</body>
1 文内的样式优先级为1,0,0,0，所以始终高于外部定义。 2 有!important声明的规则高于一切。 3 如果!important声明冲突，则比较优先权。 4 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 5 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
注意
.c1{color: red!important; /*无敌的声明*/
}
继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
<head><style>.c2{color: red;}</style>
</head>
<body><div class="c2"><div><p>P4</p></div></div>
</body>转载于:https://www.cnblogs.com/lidagen/p/7299481.html
CSS基础part1相关推荐
- CSS基础(part1)--引入CSS的方式
学习笔记,仅供参考,有错必纠 文章目录 CSS CSS的定义 引入CSS的方式 行内样式 嵌入样式 外联CSS样式 导入样式 CSS CSS的定义 什么是CSS? CSS 指层叠样式表 (Cascad ...
- html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础 课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标 熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
- CSS基础_Day04
CSS基础 一.CSS继承 1.给 HTML 的 body 元素添加样式 每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
- CSS基础_Day03
CSS基础 一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
- CSS基础_Day02
CSS基础 一.字体 1.更改元素的字体大小 字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
- CSS基础_Day01
CSS基础 一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
- 学习笔记（二）——CSS基础
文章目录 一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式 三.选择器 3.1.基础选择器 3.1.1.标签 ...
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- 和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
最新文章
- settimeout需要清除吗_【期刊导读】新证据：HBsAg水平极低的非活动性HBsAg携带者经聚乙二醇干扰素治疗24周， HBsAg清除率高达83.3%...
- python可以处理任何字符编码文本_python数据类型、字符编码、文件处理
- 用户界面框架jQuery EasyUI示例大全之DataGrid（1/4）
- 生活、教育等相关概要
- C语言基本类型和存储类别
- python中range 函数_pythonrange，range函数的用法
- Linux磁盘管理之磁盘结构、概念、原理01
- python逐行读取txt文件-在python 3.4上逐行读取文本文件
- userscript ajax,在Greasemonkey的userscript文本追加到一个表单时使用Ajax提交
- 世界500强企业名称中英对照
- 【量化笔记】量价关系分析
- ChemDraw使用不了怎么办
- 第六天 黑马十次方 用户注册、用户登陆掌握js-cookie、微信扫码登陆、nuxt嵌套路由
- xxxiNetxxxxx2
- win10照片文件夹里面图片，突然不显示缩略图
- ionic：引入图标
- 神秘贼掉包二维码，支付宝赔偿200多，烧烤小哥为何还骂支付宝没良心？
- 云计算概念入门和知识普及（转）
- ps3slim安装linux,PS3 Slim配置详解 新旧款真机对比
- GNU Radio学习一 :什么是GUN Radio