CSS
CSS
1.CSS的导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color:green;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
</body>
</html>
2.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- 标签选择器，会选择到页面上所有的这个标签的元素-->
h1{
color:saddlebrown;
}
</style>
</head>
<body>
<h1>1</h1>
<h1>2</h1>
<p>3</p>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器的样式：.class的名称{}
好处，可以多个标签归类，是同一个class
*/
.h{
color: #c43232;
}
.j{
color: #613b3b;
}
</style>
</head>
<body>
<h1 class="h">1</h1>
<h1 class="j">2</h1>
<p>3</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器：id必须保证全局唯一
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器>class选择器>标签选择器*/
#c{
color:green;
}
.style1{
color:saddlebrown;
}
h1{
color: aquamarine;
}
</style>
</head>
<body>
<h1 id="c" class="style1">1</h1>
<h1 class="style1">2</h1>
<h1 class="style1">3</h1>
<h1>4</h1>
<h1>5</h1>
</body>
</html>
2.2层次选择器
1.后代选择器 在某个元素的后面
<style>
/* 后代选择器*/
body p{
background: green;
}
</style>
2子选择器 一代 儿子
/*子选择器*/
body>p{
background: saddlebrown;
}
3.相邻兄弟选择器 同辈
/*兄弟选择器 相邻(向下)*/
.active + p{
background: aquamarine;
}
4.通用选择器
/*通用选择器 当前选中元素的向下的所有兄弟元素*/
.active~p{
background: aquamarine;
}
2.3结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: green;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: aquamarine;
}
/* 选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个 并且是当前元素才生效 顺序*/
p:nth-child(1){
background: red;
}
/*选中父元素，下的p元素的第二个 类型*/
p:nth-of-type(2){
background: yellow;
}
2.4属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: green;
text-align: center;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/* 属性名 属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/* 存在id属性的元素 a[]{}*/
/* a[id]{*/
/* background: yellow;*/
/* }*/
/* id=firat的元素*/
/* a[id=first]{*/
/* background: yellow;*/
/* }*/
/* class中有links的元素*/
/* a[class*=link]{*/
/* background: yellow;*/
/* }*/
/* 选中href中以http开头的元素*/
a[href^=http]{
background: aquamarine;
}
</style>
</head>
<body>
<p>
<a href="http://www.baidu.com" class="link item first" id="first">1</a>
<a href="" class="link item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="link item">3</a>
<a href="images/123.png" class="link item">4</a>
<a href="images/123.jpg" class="link item">5</a>
<a href="abc" class="link item">6</a>
<a href="/a.pdf" class="link item">7</a>
<a href="/abc.pdf" class="link item">8</a>
<a href="abc.doc" class="link item last">9</a>
</p>
</ul>
</body>
</html>
3.美化网页元素
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 20px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">java</span>
</ul>
</body>
</html>
3.1字体样式
<!--
font-family: 字体
font-size： 字体大小
font-weight: 字体粗细
color: 字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color:#a13d30;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
/*斜体 粗细 大小/行高 样式*/
p{
font:oblique bolder 12px "楷体";
}
</style>
3.2文本样式
<!--
颜色：单词
RGB 0-F
RGBA A:0-1
text-align: 排版，居中
text-indent: 2em; 段落首行缩进
height：300px；
line-height: 300px;
行高和块的高度一致，就可以上下居中
-->
<style>
h1{
color:rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: aquamarine;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*去下划线*/
a{
text-decoration:none;
}
</style>
图片和文字水平对齐
<!--水平对齐，参照物，a,b-->
<style>
img,span{
vertical-align: middle;
}
</style>
3.3超链接伪类+阴影
<style>
/*默认颜色*/
a{
text-decoration: none;
color:#000000;
}
/*鼠标悬浮的状态（只需要记住）*/
a:hover{
color:orange;
}
/*鼠标按住未释放的状态*/
a:active{
color:green;
}
/*a:link{*/
/* color:blue;*/
/*}*/
/*a:visited{*/
/* color:red;*/
/*}*/
/*text-shadow: 阴影颜色，水平偏移 垂直偏移 阴影半径
右，下为正，左，上为负
*/
#price{
text-shadow: aqua 10px 10px 2px;
}
</style>
3.4列表样式练习
.nav{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color:orange;
text-decoration: underline;
}
3.5背景图像应用+渐变
<style>
div{
width: 1000px;
height: 700px;
/*粗细，样式，颜色*/
border: 1px solid red;
background-image: url("/images/1.png");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
/*颜色 图片 图片位置 平铺方式*/
/*background: red url("/images/d.png") 400px 1px no-repeat;*/
</style>
渐变
<style>
body{
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
</style>
4.盒子模型
4.1内外边距+边框
margin：外边距
padding：内边距
border：边框
body{
/*body总有一个默认的外边距*/
margin:0;
/*粗细，样式，颜色*/
/*solid 实线
dashed 虚线*/
border: 1px solid red;
}
/*外边距：居中元素*/
margin：0 auto；/*上下：0 左右：auto*/
margin：0 0 0 0/*上 左 下 右 顺时针*/
/*padding也一样*/
/*计算盒子大小：margin+border+padding+内容宽度*/
<!--万能居中办法-->
<div style="width:500px;display:block;text-align:center">
<img src="images/tx.jpg" alt="">
</div>
4.2圆角边框
/*左上 右上 右下 右上 顺时针方向*/
/*圆圈：圆角等于宽度*/
border-radius:50px 20px;
4.3阴影
/*水平偏移 垂直偏移 阴影半径 阴影颜色*/
box-shadow:10px 10px 100px yellow;
浙公网安备 33010602011771号