首页 > 代码库 > css
css
概念：
CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一
css语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）
css样式表
1.行内样式
它是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将css代码直接写在其中
<div style="color:red;font-size: 20px;">css的初体验</div>
2.内部样式
内部样式就是将css写在<head>与</head>之间，并且用<style>和</style>标签进行声明。
类
div{ color:red; font-size: 20px; } <div>css的初体验2</div>
各种选择器
标签选择器
div{ color:red; font-size: 20px; } <div>css的初体验2</div>
id选择器
#two{ color: yellow; } <div id="two">css的初体验2</div> id不要重复 只能唯一
类选择器
.three{ color:blue; } <div class="three">css的初体验2</div> <span class="three">span标签</span>
包含选择器
.four span{ color:green; } <div class="four"> <span>css测试dsad</span> </div>
分组选择器
div,span,h2{
color:orange;
}
通用选择器
*{
color:gray;
}
伪类选择器
:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ /*color:red;*/ } a:visited{ color:red; } a:hover{ color:green; } a:active{ color:yellow; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
选择器优先级
行内样式>id选择器>类选择器>标签选择器>通用选择器
3.外部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="a.css"> </head> <body> <div class="show">csssssssss</div> <h1>cscs</h1> <span>span</span> </body> </html>
样式全部写在a.css文件中
css的基本属性
-文字段落
边框设置：border
宽度，样式，颜色 (border: 1px solid red;)
文字属性
字号:font-size
颜色:color
文本行高：line-height
语法： line-height：行高值(像素)
水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
段落文本属性设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 980px; height: 48px; border: 1px solid red; line-height: 48px; /*text-align: right;*/ color:#503131; font-size: 12px; } </style> </head> <body> <div> 段落文本测试 </div> </body> </html>
背景属性
背景颜色：background-color
关键字：red pink orange
背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）
背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
background-position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #myimg{ width:18px; height: 18px; background-image: url("02.png"); background-position-y: 130px; } </style> </head> <body> <div id="myimg"> </div> </body> </html>
边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right
margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } #main{ width: 400px; height:300px; border:1px solid red; } #content{ width:200px; height:150px; border:1px solid blue; /*margin-top: 10px;*/ /*margin-left: 10px;*/ margin:10px 10px; } </style> </head> <body> <div id="main"> <div id="content"> </div> </div> </body> </html>
padding内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #main{ width:300px; height: 200px; border:1px solid red; padding-top: 100px; } </style> </head> <body> <div id="main"> dsnandsadsamkdmskanfdjsanf </div> </body> </html>
布局属性float
float:none; 默认值
float:left; 左浮
float:right;右浮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width:200px; height: 100px; border:1px solid red; float: left; margin:0 10px; } </style> </head> <body> <div class="one">one</div> <div class="one">one</div> <div class="one">one</div> <div class="one">one</div> </body> </html>
有若干个div，它们都向左浮动，则它们会像流水一样，依次排开
制作banner头部，主要就是利用了float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .pg-head{ height:20px; background-color: #999; } .info_login{ /*border:1px solid red;*/ float: left; } .info_user{ /*border:1px solid blue;*/ float: right; } .main{ width:780px; margin:0 auto; line-height: 20px; font-size: 12px; } </style> </head> <body> <div class="pg-head"> <div class="main"> <div class="info_login">请登录</div> <div class="info_user"> <a href="#">我的淘宝</a> <a href="#">我的支付宝</a> </div> </div> </div> </body> </html>
Display属性
Display：
block：将元素变成块级标签，可以设置高度和宽度
Inline：将元素变成行内标签，不能设置高度和宽度
Inline-block：同时具有两种
none：标签消失
<span style="background-color: gray;height:70px;width:20px;">行内标签</span>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span style="width: 100px;height: 100px;border: 1px solid red;display: inline-block;">display属性</span> </body> </html>
布局属性overflow
溢出处理属性overflow分类
Overflow (水平和垂直均设置)
Overflow-x (设置水平方向)
Overflow-y (设置垂直方向)
布局属性position
定位属性position:
fixed : 将某个元素固定在页面的某个位置
absolute : 绝对定位
relative：相对定位
css