css初识
内容概要
一、css基本语法
二、css三种引入方式
三、css选择器
四、标签、id、class、三种选择器和行内样式的优先级
五、分组和嵌套
1、css基本语法
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
<style> h1{ color:blue; } </style>
注释
/*单行注释*/
/*
多行注释
多行注释
*/
2、css三种引入方式
第一种:在head标签下的style标签下书写css代码
第二种:通过link标签从外部引入css
第三种:行内样式,在某个单独标签下书写样式(不常用,因为会造成html和css代码间的强耦合,一般只在临时修改的情况下使用)
第一种:
<head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color:blue; } </style> </head>
第二种:
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="testCSS.css"> </head>
第三种:
<body> <h1 style="background-color: orange">标题</h1> </body>
3、css选择器
在使用css修改html内的某个标签样式前,我们要知道要修改哪个标签的样式,并想办法获取它,于是就有了选择器,选择器用于筛选需要改变样式的标签
基本选择器有4种
1、id选择器
2、class类选择器
3、元素/标签选择器
4、通用选择器
id选择器
通过id修改对应标签以及该标签所包含的所有子标签的样式
书写格数:需要在id名称前加入#号,以区别与id同名的其它普通标签
<head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { color:red; } </style> </head> <body> <div id="d1">div 1</div> <div>div 2</div> </body>
class类选择器
通过class修改对应的多个(也可以是单个或没有)标签以及该标签所包含的所有子标签的样式
书写格式:需要在class前加入.号
需要特别注意的是,一个标签可以“继承”多个类
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c2 { color:red; } </style> </head> <body> <div class="c1 c2">div 1</div> <div class="c2">div 2</div> </body>
元素/标签选择器(不常用)
通过标签名称找到所有的同名标签以及其下的所有子标签
书写格式:
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { color:red; } </style> </head> <body> <div>div 1</div> <div>div 2</div> <p>p 1</p> </body>
通用选择器(不常用)
所有标签
书写格式:* {属性名:属性值}
<head> <meta charset="UTF-8"> <title>Title</title> <style> * { color:red; } </style> </head> <body> <div>div 1</div> <div>div 2</div> <p>p 1</p> </body>
组合选择器有4种
1、后代选择器
2、儿子选择器
3、毗邻选择器
4、弟弟选择器
后代选择器
用空格表示
div包含的所有span都会被修改
<head> <meta charset="UTF-8"> <title>Title</title> <style> div span{ color:red; } </style> </head> <body> <div>div 1 <p>div p 2 <span>div p span 1</span> </p> <p>div p 3</p> <span>div span</span> </div> <div id="d2">div 2</div> <p>p 1</p> <p>p 2</p> </body>
儿子选择器
用>表示
div包含的仅下一层的所有span都会被修改
<head> <meta charset="UTF-8"> <title>Title</title> <style> div>span{ color:red; } </style> </head> <body> <div>div 1 <p>div p 2 <span>div p span 1</span> </p> <p>div p 3</p> <span>div span 1</span> <span>div span 2</span> </div> <div id="d2">div 2</div> <p>p 1</p> <p>p 2</p> </body>
毗邻选择器
用+表示,只有同级的并且紧挨着(位于下方)的标签以及其包含的所有标签会被修改
<head> <meta charset="UTF-8"> <title>Title</title> <style> #d2+p{ color:red; } </style> </head> <body> <div>div 1 <p>div p 2 <span>div p span 1</span> </p> <p>div p 3</p> <span>div span 1</span> <span>div span 2</span> </div> <p>p 3</p> <div id="d2">div 2</div> <p>p 1 <span>p span1</span> </p> <p>p 2</p> </body>
弟弟选择器
用~线表示,只有同级的位于下方的所有标签以及其包含的所有后代标签会被修改
<head> <meta charset="UTF-8"> <title>Title</title> <style> #d2~p{ color:red; } </style> </head> <body> <p>p 3</p> <div id="d2">div 2</div> <p>p 1 <span>p span1</span> </p> <p>p 2</p> <div>div 3</div> <p>p 4</p> </body>
属性选择器有三种
1、只有属性名没有属性值
2、同时有属性名和对应属性值
3、同时有属性名和对应属性值的一类标签
属性选择器使用[]标明
只有属性名没有属性值
<head> <meta charset="UTF-8"> <title>Title</title> <style> [username]{ background-color: red; } </style> </head> <body> <div username="zhangsan">div 1</div> <div username="lisi">div 2</div> <p username>p1</p> <p username="zhangsan">p2</p> </body>
同时有属性名和对应属性值
<head> <meta charset="UTF-8"> <title>Title</title> <style> [username="zhangsan"]{ background-color: red; } </style> </head> <body> <div username="zhangsan">div 1</div> <div username="lisi">div 2</div> <p username>p1</p> <p username="zhangsan">p2</p> </body>
同时有属性名和对应属性值的一类标签
<head> <meta charset="UTF-8"> <title>Title</title> <style> p[username="zhangsan"]{ background-color: red; } </style> </head> <body> <div username="zhangsan">div 1</div> <div username="lisi">div 2</div> <p username>p1</p> <p username="zhangsan">p2</p> </body>
伪类选择器和类元素选择(它们不太好理解)
伪类选择器
<style> <!--未点击时a标签的状态--> a:link{ color:red; } <!--鼠标悬浮时的状态--> a:hover{ color:green; } <!--鼠标点击不松开时的状态--> a:active{ color:blue; } <!--点击过后的状态--> a:visited{ color:orange; } </style> </head> <body> <a href="http://www.jd.com" target="_blank">点我</a> </body>
对于伪类选择器,我将它理解成选择标签的不同状态
伪元素选择器
<head> <meta charset="UTF-8"> <title>Title</title> <style> <!--设置文本第一个字的样式--> p:first-letter{ font-size:48px; color:red; } <!--在p标签内容前添加内容,这里通过css而非html设置文本,css 设置的文本是不可选中的--> p:before{ content:"内容前缀"; } <!--在p标签内容后添加内容--> p:after{ content:"内容后缀"; } </style> </head> <body> <p>一段内容</p> </body>
对于伪元素选择器,我将它理解成设置标签内的虚拟文本
4、标签、id、class、三种选择器和行内样式的优先级
有两种情况
(1)标签相同,但是顺序不同
(2)标签不同
-标签相同,但是顺序不同
<head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color:red; } </style> <link rel="stylesheet" href="testCSS.css"> </head> <body> <h1 style="color:green;">一段内容</h1> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color:red; } </style> <link rel="stylesheet" href="testCSS.css"> </head> <body> <h1>一段内容</h1> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="testCSS.css"> <style> h1{ color:red; } </style> </head> <body> <h1>一段内容</h1> </body>
标签的渲染优先级符合就近原则
即相同标签的情况下,优先级按顺序排列
-标签不同
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="testCSS.css"> <style> #idh1{ color:red; } .clh1{ color:blue; } h1{ color:green; } </style> </head> <body> <h1 id="idh1" class="clh1" style="color:orange;">一段内容</h1> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="testCSS.css"> <style> #idh1{ color:red; } .clh1{ color:blue; } h1{ color:green; } </style> </head> <body> <h1 id="idh1" class="clh1">一段内容</h1> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="testCSS.css"> <style> /*#idh1{*/ /* color:red;*/ /*}*/ .clh1{ color:blue; } h1{ color:green; } </style> </head> <body> <h1 id="idh1" class="clh1">一段内容</h1> </body>
当标签不同时,css渲染的优先级无视顺序。
优先级排序:
行内样式>id选择器>class选择器>标签选择器
精准度越高的选择器有限度越高
5、分组和嵌套
如果想让不同种类的标签使用同一种样式
比如有div、span、p标签,都使用color:red样式
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { color:red; } span{ color:red; } p{ color:red; } </style> </head> <body> <div> div 1 </div> <span> span 1 </span> <p> p 1 </p> </body>
很明显,出现了重复代码
使用,可以并列多个选择器,对这些选择器同时修改
<head> <meta charset="UTF-8"> <title>Title</title> <style> div,span,p{ color:red; } </style> </head> <body> <div> div 1 </div> <span> span 1 </span> <p> p 1 </p> </body>
***待回顾***
原文地址:https://www.cnblogs.com/laijianwei/p/15231712.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例