css学习笔记
CSS的优势：
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被引擎收录
CSS三种导入方式
就近原则，哪种样式距离修饰内容近，就选择那个。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color:chartreuse;
}
style>
head>
<body>
<link rel="stylesheet" href="style.css">
<h1 style="color: aqua">hello,world!h1>
body>
html>
外部样式两种写法
链接式：
<link rel="stylesheet" href="style.css">外部样式
导入式：
<style>
@import url("style.css");
style>
选择器：选择页面某一个，或者某一类元素
标签选择器：会选择这个页面所有标签。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: #27c52e;
background: aqua;
border-radius: 34px ;
}
p{
font-size: 80px;
}
style>
head>
<body>
<h1>好好学习h1>
<h1>天天向上h1>
<p>hello,worldp>
body>
html>
类选择器：可以复用。形式为：英文状态下点加类名加大括号
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.qingjiang{
color: aqua;
}
.kuangshen{
color: blue;
}
style>
head>
<body>
<h1 class="qingjiang">好好学习h1>
<h2 class="kuangshen">好好学习h2>
<h3>好好学习h3>
body>
html>
id选择器：全句唯一，不可复用。形式为：英文状态下井号加ID名加大括号。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#qingjiang{
color: brown;
}
style>
head>
<body>
<h1 id="qingjiang">世上无难事h1>
<h1 >世上无难事h1>
body>
html>
ID选择器>类选择器>标签选择器
层次选择器：
1.后代选择器在某个元素后边
2.子选择器
body>p{
background: blue;
}
3.相邻兄弟选择器:对下边相邻的内容进行选择
.active+p{
background: aqua;
}
4.通用选择器：对向下所有兄弟
.active~p{
background: aqua;
}
5.结构伪类选择器
ul li:first-child{
background: antiquewhite;
}
ul li:last-child{
background: #27c52e;
}
p:nth-child(1){/*对父元素的第几个元素进行操作*/
background: blue;
}
p:nth-of-type(2){/*对p元素第几个操作*/
background: red;
}
6.属性选择器
=是绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
字体样式
Title
第一章
"p1"
>“天家儿郎，凭我挑选，便是当着陛下的面，此话我亦敢言。”
她高贵、冷艳、睥睨众生，世间无一人一事能令她动容。
直到她遇见了那一杯顶级雨前龙井。
他为贪腐尚书屈膝求情：“罪不祸及妻儿。”
百官感念：太子仁善。
只有她知，罪是他揭露，尚书之位是他的人接手。
他为疑似谋逆亲王奔走：“二哥孝悌，孤不信他大逆不道。”
文本样式
1.颜色rgb rgba
Title
第一章
"l1"
>111111
"l2" >3333333
"l3" >22222222
"p1">“天家儿郎，凭我挑选，便是当着陛下的面，此话我亦敢言。”
她高贵、冷艳、睥睨众生，世间无一人一事能令她动容。
直到她遇见了那一杯顶级雨前龙井。
他为贪腐尚书屈膝求情：“罪不祸及妻儿。”
百官感念：太子仁善。
只有她知，罪是他揭露，尚书之位是他的人接手。
他为疑似谋逆亲王奔走：“二哥孝悌，孤不信他大逆不道。”
2.文本对齐方式text-align:center;
3.首行缩进text-indent;
4.行高line-height=height单行文字水平居中
5.装饰text-decoration去装饰
6.图片文本水平对齐：vertical-align:middle
阴影
/*阴影颜色，水平距离，垂直距离，阴影模糊程度*/
text-shadow: aqua 10px 5px 1px;
超链接伪类
a{
text-decoration: none;
color: black;
}
/*鼠标点击*/
a:hover{
color: yellow;
font-size: 50px;
}
列表
#nav{
width: 300px;
}
.title{
line-height: 40px;
text-indent: 1em;
font-size: 18px;
font-weight: bold;
background: blue;
}
/*list-style:
none去掉黑点
circle变成空心圆
decimal变成数字
suqare正方形*/
ul{
background: gray;
}
ul li{
list-style: none;
height: 30px;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 15px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
渐变
body {
/*background-color: #0093E9;*/
background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
/*graient网站*/
盒子模型：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#box{
width: 300px;
border:1px solid cornflowerblue;
}
form{
background: yellow;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:2px dashed deeppink;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<form action="#">
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>用户名：span>
<input type="text">
div>
form>
div>
body>
html>
边框border:
边框颜色：
边框距离：
边框样式：
外边距margin
内边距padding
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#box{
width: 300px;
border:1px solid cornflowerblue;
}
h2{font-size: 30px;
background-color: yellow;
line-height: 30px;
margin: 0 auto;
color: #27a82a;
}
form{
background: yellow;
}
div:nth-of-type(1){
border:3px solid black;
padding: 10px;
}
div:nth-of-type(2) input{
border:2px dashed deeppink;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<form action="#">
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>用户名：span>
<input type="text">
div>
form>
div>
body>
html>
display:把行和块进行调整通过display：inline-block,使得行和块互通。float：是把行块元素进行左右浮动，进行这种操作，会出现一些元素突出，可以使用第一：把父区域高度调大。第二：把设置div通过clear:both,和margin:0,padding:0设置。第三通过overflow来设置hidden完成。第四父元素添加伪类after:content:";display:block;clear:both;(最常用)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#contend{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: scroll;
}
style>
head>
<body>
<div id="contend">
<img src="image/1.jpg" alt="">
<p>《哈哈哈哈哈第二季》是由爱奇艺、腾讯视频出品的励志旅行真人秀，“五哈旅行团”由邓超、陈赫、鹿晗、彭昱畅、郭京飞、王勉组成，共11期。 [4-5] [7]
节目由嘉宾们组成“五哈旅行团”从繁忙琐碎的日常生活中挤出时间开启穿越中国的旅途，讲好“与我有关”的普通人的生活故事。 [3]
节目于2021年11月20日起每周六、周日晚20:00播在爱奇艺、腾讯视频联合播出，于2022年1月30日完结p>。
div>
body>
html>
相对偏移:相对于原来的位置进行偏移，它仍然在标准文档流中，原来的位置会被保留。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
margin:10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0px;
}
#first{
background-color: #27c52e;
border: 1px dashed #0093E9;
position: relative;
top: -20px;
}
#second{
background-color: #c5332f;
border: 1px dashed #a85c9a;
}
#third{
background-color: #269189;
border: 1px dashed #291d19;
position: relative;
bottom: 40px;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
方块练习
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
line-height: 100px;
background: deeppink;
text-align: center;
color: black;
display: block;
}
a:hover{
background: #0093E9;
}
.a2,.a4{
position: relative;
left: 200px;
top:-100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
style>
head>
<body>
<div id="box">
<a class="a1" href="#">链接1a>
<a class="a2" href="#">链接2a>
<a class="a3" href="#">链接3a>
<a class="a4" href="#">链接4a>
<a class="a5" href="#">链接5a>
div>
body>
html>
绝对定位：
1.父元素没有定位，相对于浏览器定位。
2.父元素定位，相对于父元素定位
3.在父元素内移动。
绝对偏移:相对于浏览器或父元素进行偏移，它不在标准文档流中，原来的位置不会被保留。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
margin:10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0px;
position: relative;
}
#first{
background-color: #27c52e;
border: 1px dashed #0093E9;
}
#second{
background-color: #c5332f;
border: 1px dashed #a85c9a;
position: absolute;
left: 100px;
}
#third{
background-color: #269189;
border: 1px dashed #291d19;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
固定定位：fixed
z-index:
#content{
width: 280px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size:12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 280px;
height: 25px;
top: 120px;
}
.tipText{
color: #0093E9;
z-index: 999;
}
.tipBg{
background: #291d19;
/*opacity:0.5;*/
}