文章目录
css笔记
以下是学完css3后对笔记内容的整理档案
1. 初识css3
css的概念
css是层叠样式表(Cascading Style Sheets)的简称,这项技术主要用于美化网页,包括设定字体,颜色,边距,高宽,网页浮动,页面定位等功能
##css的发展史
- css1.0 基本美化样式
- css2.0 添加了div + css 的思路,提出了html与css分离的思想,是的网页变得简单
- css2.1 加入了浮动,定位等功能
- css3.0 添加了圆角边框,阴影,动画等… 改变了浏览器兼容性问题
css的优势
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- css的样式十分丰富
- 建议使用独立于html的css文件
- 有利于seo,容易被搜索引擎收录
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
快速入门/基本语法
以下是一个html文件的标准格式,建议从头开始就养成文件分类存放的习惯:
|projct:
|css
>css.css
|resources
>images
>videos
>audios
>index.html
在css文件中,涉及到的语法只有一条:选择器{样式}
选择器{
样式1;
样式2;
样式3;
...
}
那么,如何将html文件与css文件连接起来?
在html文件中利用link标签可以起到链接html和css文件的作用:
<link rel = "stylesheet" href = "path of css file">
这一行必须写在html文件的头部(head部分):
<head>
<meta charset = "UTF-8">
<title>title</title>
<link rel = "stylesheet" href = "path">
</head>
导入一个css文件
导入一个css文件主要有三种方式:
- 行内样式
- 内部样式
- 外部样式
优先级问题:
- 行内样式的优先级一定高于内部样式或者外部样式
- 内部样式和外部样式都存在时,元素会优先选择相对较近的一个并采取其样式
行内样式应用demo:
行内样式主要是写在标签的style属性中:
<!--行内样式:在标签元素中编写一个style属性,并在该属性中写下css样式-->
<h1 id = "h1" style = "color:red">This is a Level 1 heading</h1>
内部样式应用demo:
内部样式是在head中添加style标签,从而实现将css内嵌在html文件中:
<head>
<meta charset = "UTF-8">
<title>title</title>
<!--利用style标签内嵌演样式表-->
<style>
/*选择器内容*/
selector{...}
selectop{...}
</style>
</head>
外部样式应用demo:
外部样式是将css独立为一个文件,而在html中会链接这个文件,从而达到样式控制:
如果外部有一个文件css.css:
/*外部样式*/
h1 {
color: blue;
}
而此时只要在html文件中head部分添加以下内容即可:
<link rel = "stylesheet" href = "css/style.css">
扩展外部样式的两种写法:
-
连接式,如上表示
属于html标签
-
导入式(不建议):
属于css2.1,并且是css2.1所特有的
<style>
@import "css path"
</style>
2. 选择器
选择器的作用主要是选择页面上的某一种,某一类或者某一个元素
基本选择器
1) id选择器
id选择器用来选择具有指定id的元素.
id作为html文件中的元素属性,每个元素可以有且只能有一个id,且这个id是这个元素所特有的,不能与其他元素相同
所以id选择器一次最终只会选择一个元素(除非多个id全部排出来)
语法:
利用#表示id选择器,后面写所选元素的id,如果是多个元素,则用逗号","隔开,花括号中写样式
#id{styles}
#id1,#id2{styles}
demo:
/*标签选择器会选择页面上所有该标签的元素*/
h1 {
color: #10d468;
background: azure;
border-radius: 15px;
}
p {
font-size: 48px;
}
2) 类选择器
类选择器用来选择一系列被标记在一个类中的标签
这些标记是人为标记的,多个html元素可以被归入同一个类,一个元素也可以被同时划入多个类中
以下是在html标签中标记类的语法:
<p class = "class1">This is a paragh</p>
<p class = "class1 class2">This is a paragh</p>
类选择器语法:
类选择器使用一个"."表示:
/*类选择器 . 加上 class的名称 {}
好处,可以给不同的元素归类,可以复用
*/
.class1 {
color: aqua;
}
.class2 {
color: blueviolet;
}
3) 标签选择器
标签选择器用来选择html文件中的所有同一个标签:
demo:
h1{...}
p{...}
div{...}
高级选择器
1) 层次选择器
层次选择器是在html标签结构层次的基础上进行选择的
html标签层次可以这么理解:
|body
>div
|ul
>li
>li
|ol
>li
>li
>li
>li
层次选择器又分为以下四类:
-
后代选择器
在某个元素下面的所有特定分支
-
子选择器
某个元素的下一代
-
相邻兄弟选择器
某元素的下一个同级元素
-
通用选择器
当前选中元素的向下的所有被标记的同级元素
后代选择器:
后代选择器实在父代和子代中利用空格分割,从而实现选择父代标签下所有子代标签的作用
以下选择器,会把body标签下(就是整个网页里面)所有的p标签选中并且设置其背景颜色:
/*后代选择器*/
body p {
background: aqua;
}
子选择器:
子选择器利用">"标记父代和子代,与后代选择器不同的是,子选择器只选择一代,而后代选择器选择的是父标签下不论多少代内的所有子标签
以下选择器,会把body标签下的第一级内的所有p标签选中并且改变背景颜色
/*子选择器*/
body>p{
background: #10d468;
}
相邻兄弟选择器:
在类选择器后面用"+"进行筛选,表示每一个该类的元素后面的第一个特定元素
若有如下选择器:
/*相邻兄弟选择器
active周围所有的p标签
*/
.active + p{
background: blueviolet;
}
则在以下html代码中,p2和p8都会被改变样式:
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<p class="active">p7</p>
<p>p8</p>
通用选择器:
相邻兄弟选择器选择的是一个,而通用选择器选择的是所有:
若有:
/*通用选择器*/
.active~p{
background: aqua;
}
则以下代码中,有active标记的标签后面所有同级的p标签都会被改变样式:
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
2) 结构伪类选择器
伪类(pseudo-class)可以理解成是条件(在结构伪类选择器中一般用冒号":"表示)
以下四种结构伪类选择器中,第四种使用较多
<!--避免使用class 和id选择器-->
<style>
/*ul的第一个元素*/
ul li:first-child {
background: aqua;
}
/*ul 的最后一个元素*/
ul li:last-child {
background: #10d468;
}
/*选中p1 定位到父元素,选择当前的第一个元素
解释: 选中当前p元素的父级元素,然后选中父级元素下的第n个元素,并且这个元素必须是p类型的元素才会生效
*/
p:nth-child(1) {
background: blueviolet;
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(2) {
background: antiquewhite;
}
</style>
3) 属性选择器(常用)
属性选择器是标签选择器的拓展,意为选择具有某些属性的某类标签
在检索属性内容的时候,可以使用正则表达式
/*存在id的元素
a["属性名"或者"属性名=属性值"]{} //这里的属性值可以采用正则表达式
= 表示绝对等于;
*= 表示包含这个元素
^= 以特定字符开头的元素
$= 以特定字符结尾的元素
*/
/* a[id] {
background: yellow;
}*/
a[id="first"] {
background: #10d468;
}
/*class中带有links的标签*/
a[class*="linkds"] {
background: antiquewhite;
}
/*选中href中以"https"开头的元素*/
a[href^="https:"] {
color: blue;
}
/*href中以pdf结尾的元素*/
a[href$="pdf"] {
color: #10d468;
}
3. 美化网页元素
为什么美化网页?
- 有效的传递页面信息
- 美化网页,吸引用户
- 凸显页面主题
- 提高用户体验
span标签
span标签:重点要突出的字,使用span标签套起来
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>span标签</title>
<style>
#title1 {font-size: 24px}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>
1) 字体
字体样式主要包括字体颜色,字体大小,字体三类,分别使用关键字color,font-size,font-family.
<style>
body {
/*字体 双引号引起来的是英文的字体*/
font-family: 幼圆,"Lucida Console";
/*字体颜色*/
color: brown;
}
h1 {
/*字号 可以用px和em两个单位,但是后一个最好别用*/
font-size: 30px;
}
.p1 {
/*字体粗细*/
font-weight: bold;
}
.p2 {
font-weight: lighter;
}
</style>
另外,可以直接写一个font并定义所有相关css属性:
从左到右依次是:粗细,字号,字体
font: normal 16px "JetBrains Mono";
2) 文本样式和文本阴影
文本样式选项包括:
-
文本颜色(三种表示方法) color
-
直接写单词
-
RGB表示法
以#开头,利用连续三个十六进制数分别表示红色,绿色,蓝色程度
-
RGBA表示
在RGB的基础上添加了第四个参数表示透明度,透明度用0-1的数字表示
-
-
文本排列方式(居左/居中/居右) text-align
-
首行缩进 text-indent
-
行高 line-height
当行高和文本块高度(height)相等时,可以做到文字在行内上下居中的效果
-
背景颜色 background
-
文本块高度 height
-
下划线/中划线/上划线 text-decoration: underline / line-through / overline
-
文本阴影
文本颜色:
/*1. 单词表示颜色*/
color: orange;
/*2. 直接写RGB*/
color: #3b6e7f;
/*3. 参数RGB*/
color: rgb(175,137,214);
/*4. 参数RGBA*/
color: rgba(143,231,169,0.8);
文本排列方式:
text-align: center;
首行缩进:
注意:首行缩进的单位一般是em, 2em表示2个字符
text-indent: 2em;
行高:
line-height: 16px;
背景颜色:
background-color: antiquewhite;
文本块高度:
height: 120px;
上中下划线:
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
文本阴影:
文本阴影要求前两个参数是水平和竖直方向上的阴影偏移,第三个是阴影的颜色
text-shadow: 2px 2px red;
##3) 超链接伪类
超链接伪类主要是设置了超链接两种状态下的样式设计
比如
a:bover表示的是鼠标悬停在超链接上方的时候超链接的样式
a:active表示的是鼠标点击超链接(并且没有放开)的时候超链接的状态
a {
/*默认颜色*/
text-decoration: none;
color: black;
}
/*鼠标悬浮状态下的颜色*/
a:hover {
color: orange;
font-size: 24px;
}
/*鼠标按住未释放的状态*/
a:active {
color: blue;
}
4) 列表样式
列表样式主要就是改变列表头部的表示方法,比如去掉无序列表的圆点,或者改成方形之类的
list-style常用属性:
1. none -> 去掉圆点
2. circle -> 换成圆圈
3. decimal -> 换成数字
4. square -> 换成正方形
/* list-style:
1. none -> 去掉圆点
2. circle -> 换成
3. decimal: -> 数字
4. square: -> 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/r.jpg");
background-repeat: no-repeat;
background-position: 440px -2px;
}
5) 背景样式
背景样式主要包括纯色背景,图片背景和渐变背景:
纯色背景在此不做介绍
图片背景涉及到的问题主要是图片背景的图片的平铺方式,以下是设计demo:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>background</title>
<style>
div {
width: 1600px;
height: 900px;
border: 1px solid red;
/*默认是全部平铺的*/
background-image: url("images/img.jpg");
}
.div1 {
/*水平平铺*/
background-repeat: repeat-x;
}
.div2 {
/*竖直平铺*/
background-repeat: repeat-y;
}
.div3 {
/*不平铺*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
渐变背景
渐变背景不建议自己写,会很麻烦,所以以下是一个提供渐变背景的网站:
https://www.grabient.com/)
4. 盒子模型
模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sfi0O4CT-1628849227377)(pic/css博客/image-20210808223311160.png)]
- margin: 外边距
- border: 边框
- padding: 内边距
margin居中的条件:
- 块元素
- 块元素有固定宽度
另外还有一种居中,比较万能,建议在以上方法不生效的情况下使用:
<div style:"width: xxxpx;display:block;text-align:center">//关键是text-a
<img...>
</div>
1) 边框
- 边框粗细
- 边框样式
- 边框颜色
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>盒子模型</title>
<style>
/*body总有一个默认的外边距margin=8*/
body {
display: block;
margin: 0;
padding: 0;
text-decoration: none;
}
#box {
width: 400px;
height: 113px;
/*边框: 粗细 样式 颜色*/
border: 2px solid orange;
}
h2 {
text-indent: 1em;
font-size: 18px;
color: red;
line-height: 30px;
background: antiquewhite;
margin: 0;
}
form {
background: azure;
line-height: 1.5em;
}
div:nth-of-type(1) > input{
border: 2px solid black;
}
div:nth-of-type(2) input{
border: 2px dashed sienna;
}
div:nth-of-type(3) input{
border: 2px solid #2364d5;
}
</style>
</head>
<body>
<div id="box">
<h2>VIP sign in</h2>
<form action = "#">
<div>
<span>username:</span>
<input type = "text">
</div>
<div>
<span>E-mail:</span>
<input type = "text">
</div>
<div>
<span>password:</span>
<input type = "text">
</div>
</form>
</div>
</body>
</html>
2) 内外边距
内外边距主要就是margin和padding的值的问题
在设置内外边距的时候,如果只写一个参数,则会默认四个方向的边距相同:
margin:12px
如果写两个参数,则第一个参数表示上下边距,第二个参数表示左右边距:
margin: 12px 6px
或者写四个参数,一次表示
3) 圆角边框
<style>
div {
width: 100px;
height: 100px;
border: red 3px solid;
/*
参数问题:
两个参数的话,第一个参数是左上和右下,第二个参数是剩下两个参数
如果有三个参数,则第一个是坐上,第二个是做下和右上,第三个是右下
->顺时针方向
如何做一个圆圈:
圆角等于宽度
*/
/*border-radius: 10px 20px;*/
border-radius: 100px;
}
</style>
4) 盒子阴影
<style>
div {
width: 100px;
height: 100px;
border: red 3px solid;
border-radius: 100px;
box-shadow: 10px 10px 100px orchid;
}
</style>
5. 浮动
1) display
display是展示元素的方式,可以对div或者其他任意元素使用
<!--
block:块元素
inline:行内元素
inline-block:行内块元素,是块元素,但是可以内联在行中
none: 完全不显示
-->
<style>
div {
width: 100px;
height: 100px;
border:3px solid red;
display: inline;
}
span {
width: 100px;
height: 100px;
border:3px solid red;
display: inline-block;
}
</style>
2) float
float是元素浮动,元素浮动起来以后相当于到了其他元素的上层,所以会覆盖到下层没有浮动的元素
同时也可以对一个元素设置"禁止"某个方向出现浮动
float:left,right;//向左/右浮动
clear:left/right/both/none; //左侧/右侧/两侧不允许浮动/不管
3) 父级边框塌陷问题
针对父级边框塌陷问题,主要有以下四种解决方法:
-
增加父级元素的高度
这个方法比较简单,但是父级元素有时候可能已经被设置了高度,所以不推荐使用这个方法
-
添加一个空的div
简单的方法 在出现塌陷的元素后面添加一个空的div即可 但是考虑到这样会影响到整体结构 所以这个方法不是很推荐
-
overflow
设置溢出 当div内部的内容超出外边框造成溢出时可以利用overflow确定溢出部分的处理办法,比如隐藏掉溢出部分或者设置div内部为滚动样式
-
在父类中添加一个伪类
**请使用这个方法!!**你需要在css中添加一段代码,但是这种方法对html和css文件都不会有任何副作用
添加div的方法:
<div class="clear"></div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
overflow演示:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>overflow</title>
<style>
#content {
width: 250px;
height: 250px;
overflow:scroll;
}
</style>
</head>
<body>
<div id="content">
<img src = "../images/img.jpg" alt = "">
<p>
div:nth-of-type(1) 包含了body下面的div(大div)，div:nth-of-type(1) input 就包含了所有的input。
</p>
</div>
</body>
</html>
这里将overflow设置成了"滚动" 这样的话 如果div里面的图片尺寸超过了div本身的尺寸 则会把这个div变成带有滚动条的div
另外一个设置是"隐藏"(hidden) 设置隐藏的话 超出div范围的部分将会被隐藏起来不可见
添加伪类:
添加伪类的效果和添加空div其实是一样的 以下是伪类的代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1BNkiym-1628849227378)(file://D:\Notes\my-notes\Notes\typoraNotes\pic\CSS3\image-20210806103054429.png?lastModify=1628848454)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQHIQxJu-1628849227380)(file://D:\Notes\my-notes\Notes\typoraNotes\pic\CSS3\image-20210806103101659.png?lastModify=1628848464)]
6. 定位
1) 相对定位
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>relative positioning</title>
<!--Relative positioning
Offset relative to its original position.
-->
<style>
div {
margin: 10px;
padding: 10px;
font-size: 12px;
line-height: 20px;
}
#father{
border: 3px solid orange;
}
#first{
background-color: beige;
border: 3px dashed #4fe01a;
/*relative position:
top bottom left right
*/
position: relative;
top:-20px;
/*a positive number of parameter "left" means offset a number towards right.*/
left: 20px;
}
#second{
background-color: beige;
border: 3px dashed #0e6c13;
position: relative;
bottom: -10px;
right: 30px;
}
#third{
background-color: beige;
border: 3px dashed #609b70;
}
</style>
</head>
<body>
<div id="father">
<div id="first">The first box.</div>
<div id="second">The second box.</div>
<div id="third">The third box.</div>
</div>
</body>
</html>
相对定位:
把元素从原始位置推到一个新的位置
利用top, bottom, left, right可以确定偏移的距离
如果一个元素被相对定位了,这个元素仍然存在于标准文件流中(因为不会发生父级边框塌陷问题),而且他的初始位置是被保留的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgXEeW6Y-1628849227381)(file://D:\Notes\my-notes\Notes\typoraNotes\pic\CSS3\image-20210806111250005.png?lastModify=1628848698)]
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>assignment</title>
<style>
#father {
margin: 10px auto;
border: 3px solid black;
width: 300px;
height: 300px;
padding: 5px;
}
a {
text-decoration: none;
display: block;
height: 100px;
width: 100px;
background-color: pink;
text-align: center;
line-height: 100px;
}
a:hover {
background-color: skyblue;
}
#link2,#link4 {
position: relative;
left: 200px;
top: -100px;
}
#link5 {
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="father">
<a href = "#" id="link1">link</a>
<a href = "#" id="link2">link</a>
<a href = "#" id="link3">link</a>
<a href = "#" id="link4">link</a>
<a href = "#" id="link5">link</a>
</div>
</body>
</html>
2) 绝对定位
基于xxx,设置top, left, right, bottom等属性
-
如果不存在被相对定位的父级元素:
定位将会以浏览器边界为标准进行
-
通常地,如果父级元素已经被相对定位了:
定位将会以被相对定位的父级元素为标准
如果采用了这种方式,那么这个元素将不存在于标准文档流中,要记得解决子元素的父级边框塌陷问题
**以下是demo,**请注意第16,25.26行的设置
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>absolute position</title>
<style>
div {
margin: 10px;
padding: 10px;
font-size: 12px;
line-height: 20px;
}
#father{
border: 3px solid orange;
position: relative;
}
#first{
background-color: skyblue;
border: 3px dashed #4fe01a;
}
#second{
background-color: skyblue;
border: 3px dashed #0e6c13;
position: absolute;
right: 30px;
}
#third{
background-color: skyblue;
border: 3px dashed #609b70;
}
</style>
</head>
<body>
<div id="father">
<div id="first">The first box.</div>
<div id="second">The second box.</div>
<div id="third">The third box.</div>
</div>
</body>
</html>
3) 固定定位
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>demo</title>
<style>
/*give body a specific height and width.*/
body{
height: 1000px;
}
/*absolute position: position relative to the browser.*/
div:nth-of-type(1) {
height: 100px;
width: 100px;
background-color: pink;
color: black;
position: absolute;
right: 30px;
bottom: 30px;
}
/*fixed position*/
div:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: pink;
color: black;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">The first box.</div>
<div id="second">The second box.</div>
<div id="third">The third box.</div>
</div>
</body>
</html>
4) z-index
z-index其实就是网页上的高度坐标
这个坐标的最小值是0, 最大值是999, 表示对应元素在网页上的高度坐标
在使用z-index之前要先对元素进行定位
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>zIndex</title>
<link rel = "stylesheet" href = "css/css.css">
</head>
<body>
<div id="content">
<ul>
<li><img src = "../images/img3.jpg" alt = ""></li>
<li class="tipText">Kuang Study, yyds.</li>
<li class="tipBG"></li>
<li>Time: 2021/8/7. </li>
<li>Position: moon.</li>
</ul>
</div>
</body>
</html>
#content {
width: 350px;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 2px solid black;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#content ul {
/*make father element relative positioned,
so that can make sub element absolute positioned.
*/
position: relative;
}
.tipText,.tipBG {
position: absolute;
width: 350px;
color: magenta;
top: 60px;
}
.tipBG {
background: black;
height: 25px;
/*transparency*/
opacity: 5%;
}
.tipText {
z-index: 20;
}
1127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
