CSS学习笔记
CSS
1、 什么是CSS
Cascading Style Sheet(层叠/级联样式表)
层叠：多个样式可以作用在同一个html的元素上，同时生效
2、作用
表现层,美化网页
- 内容
- 字体
- 颜色
- 边距
- 宽高
- 背景图片
- 网页浮动
- ...
3、优势
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO, 容易被搜索引擎收录
4、CSS的三种导入方式
- 内部样式
- 外部样式
- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: blue;
}
</style>
<!-- 外部样式 -->
<!-- 链接式:-->
<link rel="stylesheet" href="css/style.css">
<!-- 导入式-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
<!--样式优先级:
遵循就近原则, 离代码的远近, 此处是内部 > 外部 > 内部-->
<!--行内样式: 在标签元素中,编写一个style属性,编写样式即可,不符合结构与表现分离-->
<h1 style="color: crimson">标题</h1>
</body>
</html>
拓展：外部样式的两种写法
-
链接式：link标签，只能在html源代码中使用
<!-- 外部样式 --> <link rel="stylesheet" href="css/style.css"> -
导入式：
@import是 CSS2.1 特有的
<!-- 导入式--> <style> @import url("css/style.css"); </style>首页link和import语法结构不同，前者 link 是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要 style 标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
5、(重点)选择器
作用：选择页面上的某一个或者某一类元素
5.1、基本选择器
优先级： 不遵循就近原则，id选择器 > class选择器 > 标签选择器
1、标签选择器
格式：标签{}，会选择到页面上所有的这个标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**标签选择器,会选择到页面上所有的这个标签的元素**/
h1{
color: crimson;
background: aquamarine;
border-radius: 10px;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>学汇编</h1>
<p>学Python</p>
<p>学C++</p>
</body>
</html>
2、类选择器
格式: .class名称{}，好处,可以多个标签归类,是同一个class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器格式: .class名称{}
好处,可以多个标签归类,是同一个class */
.title_1{
color: crimson;
}
.title_2{
color: blue;
}
</style>
</head>
<body>
<h1 class="title_1">标题1</h1>
<h1 class="title_2">标题2</h1>
<h1 class="title_1">标题3</h1>
<h1 class="title_2">标题4</h1>
<!--不同的标签也可以用同一个class-->
<p class="title_1">标题5</p>
</body>
</html>
3、ID选择器
格式: #id名称{}， ID必须保证全局唯一!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ID选择器格式: #id名称{}
ID必须保证全局唯一!*/
#title_3{
color: #dcd914;
}
#title_4{
color: #f33a13;
}
</style>
</head>
<body>
<h1 id="title_3">标题3</h1>
<h1 id="title_4">标题4</h1>
</body>
</html>
5.2、高级选择器
1、层次选择器
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul id="u_list">
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
<p>p7与li同级</p>
</ul>
<p class="active">p8</p>
<p>p9</p>
</body>
后代选择器
在某个元素的后代所有的同类标签
/* 1. 后代选择器,选择后代中所有的同类标签,ul标签的id为u_list*/
#u_list p{
color: #dc1428;
}
子选择器
选择下一个层次的标签
/* 2. 子选择器,选择下一个层次的同类标签，ul标签的id为u_list */
#u_list > li{
color: crimson;
}
相邻兄弟选择器
弟弟选择器,不选自己
/* 3. 相邻兄弟选择器 同辈,对下不对上(弟弟选择器)，p2和p8的class都是active */
.active + p{
color: crimson;
}
通用选择器
所有弟弟选择器，不选自己
/* 4. 通用选择器 选择所有同辈,对下不对上(所有弟弟选择器)*/
.active ~ p{
color: crimson;
}
2、结构伪类选择器(带冒号，不常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 避免使用class,id选择器 -->
<style>
/*ul的第1个子元素*/
ul li:first-child{
background: #dcd914;
}
/*ul的最后1个子元素*/
ul li:last-child{
background: #d61326;
}
/*ul的第2个子元素*/
ul li:nth-child(2){
background: blue;
}
/* 选中p1: 定位到父元素(body), 选择当前的第2个元素,并且这个元素标签要跟：前的标签一样 (不好用)*/
p:nth-child(2){
color: blue;
}
/* 选中p2: 定位到父元素下(body)的p的第2个元素 (不好用)*/
p:nth-of-type(2){
color: blueviolet;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
3、属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
/*左浮动*/
float: left;
/*块级元素*/
display: block;
/*宽高*/
width: 50px;
height: 50px;
/*圆角*/
border-radius: 25px;
/*对齐方式,居中*/
text-align: center;
/*文字颜色*/
color: chocolate;
/*去掉下划线*/
text-decoration: none;
/*外边距*/
margin: 10px;
/*行高,使文字居中*/
line-height: 50px;
}
/* 选中存在指定属性的元素,可以写多个属性 a[属性名1][属性名2][...]{} */
a[id]{
background: #dcd914;
}
/*
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
*/
/* 选中class中有first的元素 ,正则匹配*/
a[class*="active"]{
background: #dc1428;
}
/* 选中class中first开头的元素*/
a[class^="first"]{
background: blue;
}
/* 选中class中item结尾的元素 */
a[class$="item"]{
background: chartreuse;
}
/* 结合元素选择器 选中链接4 只会匹配class中的字串*/
a.second.first{
background: black;
}
/* 多类选择器 选中链接3,h1, 如果不指定匹配元素,则会匹配所有元素*/
.demo{
background: #183de8;
}
</style>
</head>
<body>
<p class="demo">
<!-- 超链接 -->
<a href="" class="links item 1" id="first">链接1</a>
<a href="" class="links item active" target="_blank" title="test">链接2</a>
<a href="" class="links item 3 demo">链接3</a>
<a href="" class="links item second first">链接4</a>
<a href="" class="links item 5">链接5</a>
<a href="" class="links item first">链接6</a>
<a href="" class="links item 7" id="second">链接7</a>
<a href="" class="first links item">链接8</a>
<a href="" class="links item 9">链接9</a>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>
<h1 class="demo">标题1</h1>
</p>
</body>
</html>
6、美化网页元素
6.1、span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#java{
color: #dc1428;
}
</style>
</head>
<body>
欢迎学习<span id="java">java</span>
</body>
</html>
6.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
字体系列font-family
字体风格font-style
字体变形font-variant
...
-->
<style>
body{
font-family: 宋体;
font-style: oblique;/* 斜体 */
font-variant: small-caps;/* 小型大写字母 ,原本是大写的不会改变 */
...
}
</style>
</head>
<body>
<h2>故事简介</h2>
Thank you!<br>
“潘子！”我惊了一下，但是没法靠过去看。<br>
对方道：“小三爷，快走。”声音相当微弱。<br>
接着我听到一连串的咳嗽声。“你怎么样？”我问道，“你怎么会在这儿？”<br>
潘子在黑暗中说道：“说来话长了，小三爷，你有烟吗？”“在这儿你还抽烟，不怕肺烧穿？”<br>
我听着潘子的语气，觉得他特别地淡定，忽然起了一种非常不详的预感。<br>
</body>
</html>
6.3、文本样式
一般都是现用现找
1、颜色
2、文本对齐方式
3、首行缩进
4、行高
5、装饰
6.4、超链接伪类
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
6.5、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 效果:
链接不要下划线,无序列表前的 点 去掉-->
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a></li>
<li><a href="#">家电</a> <a href="#">手机</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a></li>
<li><a href="#">服饰</a> <a href="#">化妆</a></li>
<li><a href="#">食品</a> <a href="#">保健</a></li>
</ul>
</div>
</body>
</html>
#nav{
width: 200px;
}
.title{
color: #d61326;
/*粗体*/
font-weight: bold;
/*首行间距*/
text-indent: 1cm;
/*行高*/
line-height: 35px;
background: cyan;
}
ul li{
height: 30px;
/*无列表样式*/
list-style: none;
/*首行间距*/
text-indent: 1cm;
background: #dcd914;
}
a{
/*无下划线*/
text-decoration-line: none;
}
6.6、背景图像
在使用简写属性时，属性值的顺序为：
- background-color 颜色
- background-image 图像
- background-repeat 平铺方式
- background-attachment
- background-position
| 属性 | 描述 |
|---|---|
| background | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
6.7、渐变
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。
CSS 定义了两种渐变类型：
- 线性渐变（向下/向上/向左/向右/对角线）
- 径向渐变（由其中心定义）
如需创建线性渐变（默认从上到下），您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
7、盒子模型
7.1、margin：外边距
CSS 拥有用于为元素的每一侧指定外边距的属性：(默认顺序 上右下左 顺时针)
- margin-top
- margin-right
- margin-bottom
- margin-left
所有外边距属性都可以设置以下值：
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
提示：允许负值。
7.2、padding：内边距
CSS 拥有用于为元素的每一侧指定内边距的属性：（默认顺序 上右下左 顺时针）
- padding-top
- padding-right
- padding-bottom
- padding-left
所有内边距属性都可以设置以下值：
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
提示：不允许负值。
7.3、border：边框
默认顺序 -> border: (线宽 样式 颜色)
1、边框宽度width
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick
2、边框样式style
border-style 属性指定要显示的边框类型。
允许以下值：
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
3、边框颜色color
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
- name - 指定颜色名，比如 "red"
- HEX - 指定十六进制值，比如 "#ff0000"
- RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
- HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
- transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
7.4、圆角边框和阴影
圆角边框border-radius
属性用于向元素添加圆角边框
p {
border: 2px solid red;
border-radius: 5px;
}
- text-shadow
- box-shadow
文字阴影text-shadow
CSS text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）
h1 {
text-shadow: 2px 2px red;
}
盒子阴影box-shadow
CSS Box Shadow (w3school.com.cn)
div {
box-shadow: 10px 10px 5px grey;
}
7.5、浮动(会离开当前图层)
1、块级元素,独占一行
h1-h6 p div 列表...
2、行内元素,不独占一行
span a img strong...
行内元素可以被包含在块级元素中，反之不可以。
3、display
CSS 布局 - display 属性 (w3school.com.cn)
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block (块级)或 inline（行内）。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| ... | ... |
4、浮动float
CSS 布局 - 浮动和清除 (w3school.com.cn)
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<h1>Clearfix</h1>
<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>
<div>
<img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>
<div class="clearfix">
<img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>
但是，新的现代 clearfix hack 技术使用起来更安全,使用伪类 :after
.clearfix:after {
content: "";
clear: both;
display: table;
}
7.6、定位
CSS 布局 - position 属性 (w3school.com.cn)
所有 CSS 定位属性
| 属性 | 描述 |
|---|---|
| bottom | 设置定位框的底部外边距边缘。 |
| clip | 剪裁绝对定位的元素。 |
| left | 设置定位框的左侧外边距边缘。 |
| position | 规定元素的定位类型。 |
| right | 设置定位框的右侧外边距边缘。 |
| top | 设置定位框的顶部外边距边缘。 |
| z-index | 设置元素的堆叠顺序。 |
1、相对定位 position: relative
相对原始的位置偏移
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。仍然在当前图层（文档流）
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
2、绝对定位 position: absolute
1、父级元素不存在定位（父级元素没有position属性）的情况下，相对于浏览器定位
2、父级元素存在定位的情况下，相对于父级元素定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
3、固定定位 position:fixed
相对于浏览器位置偏移
p.one
{
position:fixed;
left:5px;
top:5px;
}
浙公网安备 33010602011771号