CSS学习
目录
什么是CSS
如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点加难点）
- 美化网页（文字，阴影，超链接，列表，渐变）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
快速入门
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css的代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1：
声明2：
声明3：
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
css优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
CSS导入方式
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
<!--内部样式-->
<style>
h1{
color:green;
}
</style>
<!--外部样式-->
h1{
color:yellow;
}
优先级：就近原则
扩展：外部样式两种写法
-
链接式
<link rel="stylesheet" href="./css/style.css"> -
导入式
<style> @import url(./css/style.css) </style>
选择器
基本选择器
标签选择器
<style>
/* 标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: red;
}
</style>
类选择器
<style>
/* 类选择器 .class名称
好处，可以多个标签归类，是同一个class，可以复用*/
.xu{
color: green;
}
</style>
<h1 class="xu">我是标题</h1>
ID选择器
<!--内部样式-->
<style>
/* id选择器 id保证全局唯一
#id */
#xu{
color: green;
}
</style>
<h1 id="xu">我是标题</h1>
优先级：ID选择器>class选择器>标签选择器
层次选择器
后代选择器
在某个元素的后面，子子孙孙
<style>
body p{
background:green;
}
</style>
子选择器
只有一代，第一代才有
<style>
body>p{
background:green;
}
</style>
相邻兄弟选择器
向下相邻，只有一个
<style>
.nab + p{
background:green;
}
</style>
<p>p1</p>
<p class="nab">p2</p>
<p>p3</p>
通用选择器
向下所有兄弟元素
<style>
.nab~p{
background:green;
}
</style>
结构伪类选择器
<style> #ul的第一个元素
ul li:first-child{
background:green;
}
</style>
<style> #ul的最后一个元素
ul li:last-child{
background:green;
}
</style>
<style> #选择当前p元素的父级元素，选中父级元素的第一（可改）个元素，并且是当前元素才生效
p:nth-child(1){
background:green;
}
</style>
<style> #选择当前p元素的父级元素的p元素的第二个
p:nth-of-type(1){
background:green;
}
</style>
属性选择器（常用）
<style>
.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:#2700ff;
text-align:center;
color:gainsboro;
text-decoration:none;
margin-right:5px;
font:bold 20px/50px Arial;
}
/*存在id属性
属性名，属性名=属性值（正则）
=绝对等于
*=包含
^=以这个开头
$=以这个结尾
*/
a[id]{
background:yellow;
}
a[id=second]{
background:green;
}
a[class*=links]{
background:black;
}
CSS的作用及字体样式
span标签：重点要突出的字，使用span套起来
<style>
#n{
font-size:50px
}
</style>
欢迎学习<span id="n">Java</span>
字体样式
- font-family:字体
- font-size:字体大小
- font-weight:字体粗细
- color:字体颜色
- ...
文本样式
-
颜色
- rgb color:rgb(0,0,0)
- rgba 增加了透明度 color:rgba(0,255,255,0.5)
-
文本对齐的方式
- text-align:center
- text-align:left
- text-align:right
-
首行缩进
- text-indent:2em
-
行高
- height:300px
- line-height:300px 行高和块的高度一致就可以上下居中
-
装饰
- text-decoration:underline 下划线
- text-decoration:line-through 中划线
- text-decoration:overline 上划线
- text-decoration:none a标签（超链接）默认下划线，可以设置为none去掉
-
文字图片水平对齐：a,b
文本阴影和超链接伪类
伪类
- a:hover{color:red} 鼠标悬停状态
- a:active{color:red} 鼠标按住未释放的状态
- a:link 未访问的链接
- a:visited 已访问的链接
阴影
- text-shadow: green 10px 10px 10px 阴影颜色 水平偏移 垂直偏移 阴影半径
列表样式练习
ul li{
height:30px;
list-style:none;//去掉圆点
}
none:去掉圆点
circle:空心圆
decimal:数字
square：正方形
<div id="nav">
</div>
<style>
#nav{
weight:50px;
height:80px;
}
</style>
嵌套在div标签里，设置大小
背景图像应用与渐变
背景颜色
背景图片
<style>
div{
width:1000px;
height:600px;
border:1px solid red;
background-image:url("images/tx.jpg")//默认是全部平铺的
background-repeat:repeat-x;水平平铺
background-repeat:repeat-y;竖直平铺
background-repeat:no-repeat;不平铺
background-position:240px 39px;
}
</style>
//合在一起写 颜色 图片 位置 平铺方式
background:red url("") 270px 10px no-repeat;
渐变 径向渐变 圆形渐变
background-color: #4158D0;
background-image: linear-gradient(30deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
盒子模型及边框使用
margin：外边距
padding：内边距
border：边框
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
/*border 粗细 样式 颜色*/
body{
/*总有一个默认的外边距*/
margin:0;
padding:0;
text-decoration:none;
}
#box{
width:300px;
border:1px solid red;
}
h2{
font-size:16px;
background-color:green;
line-height:30px;
}
form{
background:#3cdba6;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:3px dashed yellow;
}
外边距
/*外边距的妙用 居中 必须是块元素，有固定的宽度*/
/*
margin:0 上下左右
margin:0 1px 上下 左右
margin:0 1px 2px 3px 左上 右上 右下 左下 顺时针
*/
内边距
padding:
与外边距用法一样
盒子计算：
margin+border+padding+内容宽度
圆角边框及阴影
圆角边框
border-radius:50px 50px 20px 60px; 顺时针
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:50px 50px 20px 60px; /*左上 右下*/
}
阴影
div{
width:100px;
height:100px;
border:10px solid red;
box-shadow:10px 10px 1px yellow; /* 长 宽 模糊半径 颜色*/
}
display和浮动
标准文档流
块级元素：独占一行
行内元素：不独占一行，可以被包含在块级元素中
/*
block 块内元素
inline 行内元素
inline-block 是快元素但是可以内联，在一行
none 不显示
float:left;左右浮动
right
*/
div{
width:100px;
height:100px;
border:1px solid red;
}
span{
width:100px;
height:100px;
border:1px solid red;
display:block;
float:left;
clear:both;//
}
overflow及父级边框塌陷问题
clear:
- right 右侧不允许有浮动元素
- left 左侧不允许有浮动元素
- both 两侧都不允许有浮动
- none
父级边框塌陷问题
解决方案
- 增加父级元素高度
- 浮动元素增加一个空的div标签，清除浮动
- overflow
overflow:hidden;多余的隐藏
overflow:scroll;滚动条
- 父类添加一个伪类
#father:after{
content:'';
display:bock;
clear:both;
}
定位
相对定位
相对于原来的位置偏移，相对定位的话，仍然在标准文档流中，原来的位置会被保留
#first{
background-color:red;
border:1px dashed #666;
position:relative;/*相对定位*/
top:-20px; /*上移 距离上*/
left:20px; /*右移 距离左边*/
}
绝对定位
position:absolute
-
没有父级元素定位的前提下，相对于浏览器定位
-
假设父级元素存在定位，父级元素position：relative，我们通常会相对于父级元素进行偏移
-
在父级元素范围内移动，绝对定位后，位置不保留
固定定位
position:fixed
z-index
z-index:100
opacity:0.5 透明度
z-index:默认是0，最高无限 999
动画及视野扩展
HTML5 canvas
CSS动画
javascript动画
