CSS--CSS入门/CSS语法/盒子模型/CSS定位
2017-06-21 23:41
651 查看
CSS入门
1.HTML:负责网页的结构。CSS:负责网页的美观。
2.CSS的使用方式:
(1)行内样式:使用标签内部的style属性给每一个标签设置样式。
缺点:只能控制一个标签的样式,如果标签比较多,工作量比较大,而且更改起来比较麻烦。
<a href="xxxx" style="font-size:19px;color:#090">超链接</a>
(2)内部样式:使用style标签,给style标签中写css的样式代码。
注意:
1)使用style的标签进行css控制,css内容写在style标签体内;
2)一次控制多个标签的样式;
3)css代码和html标签混杂在一起,不好维护。css内容无法在多个html页面中重用。
<style type="text/css"> a{ font-size:24px; color:#0F0; } </style>
3)外部样式(推荐使用):在html代码的外部创建以一个css文件,css文件中写独立的css代码,使用的时候直接将css文件导入到html文件。
注意:
1)建立独立后缀为css的文件,css内容写在该文件中;
2)在使用css的html页面中,导入外部css文件。
<!-- 导入外部css文件 href: 表示外部css文件的位置 rel: 表示关联的是样式表 --> <link href="01.css" rel="stylesheet"/>
CSS语法
1.选择器(selector):使用选择器来选择需要添加样式的标签。(1)标签选择器
作用: 选择同名的标签。
语法:
标签名称{css代码}
div{ font-size:24px; color:#F00; }
(2)类选择器
作用: 选择同类的标签。
语法:
.类名{css代码}
.c1{ font-size:24px; color:#F00; }
注意:
1)选择的标签必须有class的属性。同类的标签使用同名;
2)当一个标签同时被标签选择器和类选择器选择,那么类选择器优先。
(3)id选择器
作用: 选择一个标签。
语法:
#id值{css代码}
#d1{ font-size:24px; color:#0F0; }
注意:
1)选择的标签必须有id属性;
2)在同一个html页面中,建议不要出现两个同名
11cdb
的id属性的标签,后面使用javascript代码选择标签的时候,getElementById(“id属性值”);
3)id选择器的优先级最高。
(4)并集选择器
作用: 当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容。
.c1,#d1{ font-size:24px; color:#0F0; }
(5)交集选择器
作用: 选择某个选择器中的子标签。
语法:
外部选择器 内部标签选择器{css代码}
.c1 span{ font-size:24px; color:#0F0; }
(6)通用选择器
作用: 选择所有的标签。
*{ font-size:24px; color:#0F0; }
(7)伪类选择器
作用:控制标签在不同状态下展示出不同的样式。
标签有四种状态:
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活(按下但没有松开)的状态
visited: 已经被访问过的状态(鼠标点下且松开)
<style type="text/css">
使用link伪类控制–没有访问过的状态:
a:link{ font-size:24px; color:#F00; }
使用visited伪类控制–已经被访问过的状态(鼠标点下且松开):
a:visited{ font-size:24px; color:#CCC; text-decoration:none; }
使用hover伪类控制-鼠标经过的状态:
a:hover{ font-size:24px; color:#00F; text-decoration:none; }
使用active伪类控制–鼠标激活(按下但没有松开)的状态:
a:active{ font-size:24px; color:#0F0; text-decoration:underline; }
注意:
1)在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
正确顺序: link visited hover active
2 . 常用的CSS属性和值:
CSS属性(property):给选择的标签添加什么样式。例如, 字体大小,颜色,背景…..
CSS值(value):添加样式的具体值。12px , 红色,背景图片….
(1)CSS文本
color:颜色
**color**:#F00;
字符间距:
letter-spacing:10px;
对齐方式:
text-align:center;
文本修饰:
下划线-underline, 中划线(line-through) 上划线-overline 没有:none
text-decoration:line-through;
单词间距:
word-spacing:30px;
演示:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css文本</title> <style type="text/css"> body{ word-spacing:30px; } </style> </head> <body> 在这行文字上加横线 </body> </html>
效果如下:
(2)CSS字体
字体类型 :
注意:这里的字体类型是读取系统的默认字体库,尽量使用通用的字体,如果你设置的字体,用户的系统上没有,就是使用默认的宋体显示。
font-family:"宋体";
字体大小:
font-size:24px;
字体样式:正(normal默认) 斜(italic)
font-style:italic;
字体粗细:bold 加粗
font-weight:bold;
font简写属性 :
font:italic bold 36px "黑体";
演示:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css字体</title> <style type="text/css"> body{ font:italic bold 36px "黑体"; } </style> </head> <body> 试一试 </body> </html>
效果如下:
(3)CSS背景
背景颜色:
background-color:#0CF;
背景图片:
background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
设置背景图片是否重复,或如何重复:
not-repeat: 不重复
repeat-x: x轴重复
repeat-y: y轴重复
repeat: x和y轴重复(默认)
background-repeat:no-repeat;
设置背景的起始位置:
图解:
background-position:top center;
简写属性:
background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
演示:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css背景</title> <style type="text/css"> body{ background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center; } </style> </head> <body> </body> </html>
(4)CSS列表
列表符号类型:
list-style-type:none;
设置列表符号的图片:
list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css列表</title> <style type="text/css"> ul{ /*列表符号类型*/ list-style-type:none; /*设置列表符号的图片*/ list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg); } </style> </head> <body> 系统菜单 <ul> <li>学生管理</li> <li>教师管理</li> <li>课程管理</li> </ul> </body> </html>
效果如下:
(5)CSS表格
合并表格的边框:
border-collapse:collapse;
演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css表格</title> <style type="text/css"> table{ /*合并表格的边框*/ border-collapse:collapse; } </style> </head> <body> <table border="1px" width="400px" height="200px" align="center"> <caption>期末考试成绩单</caption> <thead> <tr> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>计算机1班</td> <td>80</td> </tr> <tr> <td>李四</td> <td>计算机2班</td> <td>78</td> </tr> <tr> <td>王五</td> <td>软件1班</td> <td>90</td> </tr> </tbody> </table> </body> </html>
效果如下:
(6)CSS边框
边框颜色:
/*简写属性 1) 默认设置方向属性: 上 右 下 左; 2)如果当前方向没有设置颜色,那么取对面的颜色。*/ border-color:#F00;
border-left-color:#F00; border-right-color:#0F0; border-top-color:#00F; border-bottom-color:#C90;
边框宽度:
/*简写属性*/ border-width:10px;
border-left-width:10px; border-right-width:20px; border-top-width:30px; border-bottom-width:40px;
边框样式(注意: 边框只有加了border-style才会显示出来):
solid: 单实线
dashed:虚线
dotted: 点
double: 双实线
/*简写属性*/ border-style:solid;
border-left-style:solid; border-right-style:dashed; border-top-style:dotted; border-bottom-style:double;
使用简写属性,设置边框样式:booder:border-width border-style border-color。
/*所有边框属性的简写属性*/ border:2px solid #F00;
演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css边框</title> <style type="text/css"> div{ border:2px solid #F00; } </style> </head> <body> <div>div1</div> </body> </html>
效果如下:
盒子模型
1 . 定义:可以把html页面上每个标签看做是一个盒子。2 . 盒子相关的属性:
宽度和高度(width和height): 决定这个盒子的容量
内边距(padding): 盒子边框与内容的距离
边框(border): 盒子的厚度
外边距(margin): 盒子与盒子之间的距离
图解:
CSS定位
(1)相对定位:relative(相对自己之前的位置)(2)绝对定位:abosolute(相对父标签的位置)
(3)固定定位:fixed(相对浏览器位置固定,不随着滚动条的拖动而位置改变)
div{ width:100px; height:100px; border:10px solid #999;} #div1{ background-color:#006; } #div2{ background-color:#0C0;} #div3{ background-color:#3F0; /*position:relative; top:10px; left:10px;*/ /* position:absolute; top:20px; left:20px;*/ position:fixed; top:200px; left:450px; }
相关文章推荐
- JAVA-24-CSS入门、常用样式讲解、盒子模型、CSS定位
- 【一句话学习】css_盒子模型
- css 盒子模型 ie盒子模型
- CSS之盒子模型
- CSS之选择符、链接、盒子模型、显示隐藏元素
- CSS布局(一) 盒子模型基础
- CSS 盒子模型
- Flexible 弹性盒子模型之CSS flex-basis 属性
- [网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
- [HTML/CSS]盒子模型,块级元素和行内元素
- CSS-盒子模型
- CSS-盒子模型
- css之页面布局的w3c盒子模型
- css基础样式和盒子模型
- CSS 盒子模型(转)
- CSS系列:CSS中盒子模型
- CSS核心:盒子模型(box model)
- 30-CSS-08-CSS(CSS的盒子模型)
- JQuery CSS操作及jQuery的盒子模型
- HTML+CSS基础课程之盒子模型