css 知识笔记
style
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<style>
h1{
color: crimson;
}
style>
head>
<body>
<h1>我是标签h1>
body>
html>
link:css引入css
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<link rel="stylesheet" href="css第一个程序/css01.css">
head>
<body>
<h1>我是标签h1>
body>
html>
css的优势
内容和表现分离
网页结构表现统一 可以重复使用
样式丰富
容易被搜索引擎收录
div 标签
块标签
用于html的容器
和css一起使用 继续文档布局
css的n中导入方式
行内
<body>
<h1>我是标签h1>
<h1 style="color: crimson">
奥特曼
h1>
body>
外部
链接式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<link rel="stylesheet" href="css第一个程序/css01.css">
head>
<body>
<h1>我是标签h1>
body>
html>
导入式
css2.1
<style>@import url("文件")style>
内部
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<style>
h1{
color: crimson;
}
style>
head>
<body>
<h1>我是标签h1>
body>
html>
优先级
就近原则 谁离的作用代码越近
选择器
作用：选择页面上的某一个汉族某一类元素
基本选择器
标签选择器 选择一类标签 标签{}
类选择器 class 选择所有class属性一致的 .类{}
id选择器 全局唯一 .id名{}
id选择器 >类选择器> 标签选择器
标签选择器
<style>
h1{
color: #a048a7;
background: #24b386;
border-radius: 23px;
}
p{
font-size: 99px;
color: green;
color: #a048a7;
background: #24b386;
border-radius: 23px;
}
style>
类选择器class
好处可以多个标签归类是同一个class可以复用
<标签名 class=“类1 类2” >
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.sy{
color: #24b386;
}
.yy{
color: #2343;
}
style>
head>
<body>
<h1 class="sy">淑钰h1>
<h1 class="yy">钰钰h1>
<h1 class="sy">钰钰很帅h1>
<p class="yy">我是个内容p>
body>
html>
id选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
color: #a048a7;
}.SS{
color: green;
}
style>
head>
<body>
<h1 id="钰钰">标签1h1>
<h1 CLASS="SS">标签2h1>
<h1 class="SS">卍卐h1>
<h1>标签4h1>
body>
html>
id选择器 >类选择器> 标签选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
color: #a048a7;
}.SS{
color: green;
}
h1{
color: aqua;
}
style>
head>
<body>
<h1 id="钰钰">标签1h1>
<h1 CLASS="SS">标签2h1>
<h1 class="SS">卍卐h1>
<h1>标签4h1>
body>
html>
并集选择器
选择器1 选择器2 选择器3{
}
全局选择器
一般用于清空边距和间距
*{
}
层次选择器
后代选择器
body p{
background: #24b386;
}
子选择器
body>p{
color: crimson;
}
相邻选择器（对下 下一个 同类型）
.a1+p{
background: #a048a7;
}
通用选择器(对下 所有同类型）
.a1~p{
background: #a048a7;
}
结构伪类选择器
伪类：条件（或者特效）
特效
a:hover{
background: crimson;
}
条件`
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素 E |
| E:last-child | 作为父元素的最后一个子元素的元素 E |
| E F:nth-child(n) | 选择父级元素 E 的第 n 个子元素 F ，（ n 可以是 1 、 2 、 3 ），关键字为 even 、 odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个 E 元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个 E 元素 |
| E F:nth-of-type(n ) | 选择父元素内具有指定类型的第 n 个 F 元素 |
属性选择器
相当于id+class
属性名：属性名=属性值（正则）
=为绝对等于
*=为包含这个元素
^=以这个开头
$=以这个结尾
| 选择器 | 类 型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择 E 后面的所有 F 后代 |
| E>F | 子选择器 | 选择 E 后面的儿子 |
| E+F | 相邻兄弟选择器 | 选择 E 相邻 F 兄弟（相邻的下一个兄弟） |
| E~F | 通用兄弟选择器 | 选择 E 相邻 所有 F 兄弟（ 所有兄弟姐妹） |
Title
"bar"
>
"23.com"class="d1"id="1">1
"34.com" class="_b1" title="ws">2
"2334.com"id="2">3
"4.com"id="4">4
"233.com" class="23">5
"2333.com" class="23">6
"2333.com" class="7x">6
美化网页
有效的传递页面信息
美化网页 页面漂亮 才能吸引用户
凸显网页的主题
提高用户体验
span 标签
行内标签 没有特定含义 改变局部样式 设置文本样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#d1{
font-size: 20px;
dominant-baseline: alphabetic;
background: #24b386;
}
style>
head>
<body>
学习<span id="d1">javaspan>
body>
html>
字体样式font
字体 font-family: 楷体;
字体大小 font-size: 50px;
字体粗 font-weight: bold; 也可以用px
字体颜色 color: #24b386;
边距 margin:0px;
字体细 font-weight: lighter;
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:" 隶书 "; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font- style:italic ; |
| font-weight | 设置字体的粗细 | font- weight:bold ; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px " 宋体 "; |
weight 属性
| 值 | 说明 |
|---|---|
| normal | 默认值，定义标准的字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100 、 200 、 300 、 400 、 500 、 600 、 700 、 800 、 900 | 定义由细到粗的字体 400 等同于 normal ， 700 等同于 bold |
背景background
背景颜色 background-color: #24b386;
背景图像 background-image:url(路径)
repeat 水平和垂直平铺
no-repeat 不平铺
repeat-x只水平平铺
repeat-y只垂直平铺
背景大小控制
background-size
| 属性值 | 描述 |
|---|---|
| auto | 默认值，使用背景图片保持原样 |
| percentage | 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的 |
| cover | 整个背景图片放大填充了整个元素 |
| contain | 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 |
定位
background-positon属性
| 值 | 含义 |
|---|---|
| Xpos Ypos | 单位：px，Xpos表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X、Y方向关键词 | 水平方向的关键词： *left、center、right 垂直方向的关键词： top、center、bottom ** |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
<style>
h1{
color: crimson;
}
style>
head>
<body>
<h1>我是标签h1>
body>
html>
link:css引入css
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<link rel="stylesheet" href="css第一个程序/css01.css">
head>
<body>
<h1>我是标签h1>
body>
html>
css的优势
内容和表现分离
网页结构表现统一 可以重复使用
样式丰富
容易被搜索引擎收录
div 标签
块标签
用于html的容器
和css一起使用 继续文档布局
css的n中导入方式
行内
<body>
<h1>我是标签h1>
<h1 style="color: crimson">
奥特曼
h1>
body>
外部
链接式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<link rel="stylesheet" href="css第一个程序/css01.css">
head>
<body>
<h1>我是标签h1>
body>
html>
导入式
css2.1
<style>@import url("文件")style>
内部
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>233title>
<style>
h1{
color: crimson;
}
style>
head>
<body>
<h1>我是标签h1>
body>
html>
优先级
就近原则 谁离的作用代码越近
选择器
作用：选择页面上的某一个汉族某一类元素
基本选择器
标签选择器 选择一类标签 标签{}
类选择器 class 选择所有class属性一致的 .类{}
id选择器 全局唯一 .id名{}
id选择器 >类选择器> 标签选择器
标签选择器
<style>
h1{
color: #a048a7;
background: #24b386;
border-radius: 23px;
}
p{
font-size: 99px;
color: green;
color: #a048a7;
background: #24b386;
border-radius: 23px;
}
style>
类选择器class
好处可以多个标签归类是同一个class可以复用
<标签名 class=“类1 类2” >
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.sy{
color: #24b386;
}
.yy{
color: #2343;
}
style>
head>
<body>
<h1 class="sy">淑钰h1>
<h1 class="yy">钰钰h1>
<h1 class="sy">钰钰很帅h1>
<p class="yy">我是个内容p>
body>
html>
id选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
color: #a048a7;
}.SS{
color: green;
}
style>
head>
<body>
<h1 id="钰钰">标签1h1>
<h1 CLASS="SS">标签2h1>
<h1 class="SS">卍卐h1>
<h1>标签4h1>
body>
html>
id选择器 >类选择器> 标签选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
color: #a048a7;
}.SS{
color: green;
}
h1{
color: aqua;
}
style>
head>
<body>
<h1 id="钰钰">标签1h1>
<h1 CLASS="SS">标签2h1>
<h1 class="SS">卍卐h1>
<h1>标签4h1>
body>
html>
并集选择器
选择器1 选择器2 选择器3{
}
全局选择器
一般用于清空边距和间距
*{
}
层次选择器
后代选择器
body p{
background: #24b386;
}
子选择器
body>p{
color: crimson;
}
相邻选择器（对下 下一个 同类型）
.a1+p{
background: #a048a7;
}
通用选择器(对下 所有同类型）
.a1~p{
background: #a048a7;
}
结构伪类选择器
伪类：条件（或者特效）
特效
a:hover{
background: crimson;
}
条件`
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素 E |
| E:last-child | 作为父元素的最后一个子元素的元素 E |
| E F:nth-child(n) | 选择父级元素 E 的第 n 个子元素 F ，（ n 可以是 1 、 2 、 3 ），关键字为 even 、 odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个 E 元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个 E 元素 |
| E F:nth-of-type(n ) | 选择父元素内具有指定类型的第 n 个 F 元素 |
属性选择器
相当于id+class
属性名：属性名=属性值（正则）
=为绝对等于
*=为包含这个元素
^=以这个开头
$=以这个结尾
| 选择器 | 类 型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择 E 后面的所有 F 后代 |
| E>F | 子选择器 | 选择 E 后面的儿子 |
| E+F | 相邻兄弟选择器 | 选择 E 相邻 F 兄弟（相邻的下一个兄弟） |
| E~F | 通用兄弟选择器 | 选择 E 相邻 所有 F 兄弟（ 所有兄弟姐妹） |
Title
"bar"
>
"23.com"class="d1"id="1">1
"34.com" class="_b1" title="ws">2
"2334.com"id="2">3
"4.com"id="4">4
"233.com" class="23">5
"2333.com" class="23">6
"2333.com" class="7x">6
美化网页
有效的传递页面信息
美化网页 页面漂亮 才能吸引用户
凸显网页的主题
提高用户体验
span 标签
行内标签 没有特定含义 改变局部样式 设置文本样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#d1{
font-size: 20px;
dominant-baseline: alphabetic;
background: #24b386;
}
style>
head>
<body>
学习<span id="d1">javaspan>
body>
html>
字体样式font
字体 font-family: 楷体;
字体大小 font-size: 50px;
字体粗 font-weight: bold; 也可以用px
字体颜色 color: #24b386;
边距 margin:0px;
字体细 font-weight: lighter;
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:" 隶书 "; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font- style:italic ; |
| font-weight | 设置字体的粗细 | font- weight:bold ; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px " 宋体 "; |
weight 属性
| 值 | 说明 |
|---|---|
| normal | 默认值，定义标准的字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100 、 200 、 300 、 400 、 500 、 600 、 700 、 800 、 900 | 定义由细到粗的字体 400 等同于 normal ， 700 等同于 bold |
背景background
背景颜色 background-color: #24b386;
背景图像 background-image:url(路径)
repeat 水平和垂直平铺
no-repeat 不平铺
repeat-x只水平平铺
repeat-y只垂直平铺
背景大小控制
background-size
| 属性值 | 描述 |
|---|---|
| auto | 默认值，使用背景图片保持原样 |
| percentage | 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的 |
| cover | 整个背景图片放大填充了整个元素 |
| contain | 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 |
定位
background-positon属性
| 值 | 含义 |
|---|---|
| Xpos Ypos | 单位：px，Xpos表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X、Y方向关键词 | 水平方向的关键词： *left、center、right 垂直方向的关键词： top、center、bottom ** |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*