css入门学习 1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等 使用css样式的一个好处是通过定义某个样式,可以让不同的网页位置的字体有着统一的字体,字号或者颜色等 1.3:css代码语法 css样式由选择器和声明组成,而声明又由属性和值组成 h1 { color:red;font-size:14px;} 选择器 属性 值{属性和值构成声明} 选择器:指明网页中要应用样式规则的元素 声明:在英文大括号"{}"中的就是声明,属性和值之间用英文冒号":"分割。当有多条声明时,中间可以英文分号":"分隔 css注释代码 2:CSS基本知识(就近原则) 2.1:内联式css样式,直接写在现有的html标签中 2.2:嵌入式css样式,写在当前的文件中 2.3:外部式css样式,写在单独的一个文件中,使用link引入 css样式文件名以称以有意义的英文字母命名 rel="stylesheet" type="text/css"是固定的写法,一定要写到link标签内不可修改 语法格式(<link href="" rel="stylesheet" type="text/css">) <link>标签位置一般写在<head>标签之内 2.4:优先级 内联式>嵌入式>外部式
3:CSS选择器 3.1:什么是选择器 每一条css样式声明或者定义由两部分组成(选择器(样式)) 3.2:标签选择器 3.3:类选择器 《实际开发过程中使用类选择器最多》 类选择器名称(css样式代码;) 3.4:ID选择器 为标签设置id="id名称",而不是class="类名称"; ID选择符的前面是#号,而不是英文圆点(.); 3.5:类和ID选择器的区别 相同点:可以应用于任何元素 不同点:(1)ID选择器只能在文档中使用一个,与类选择器不同,在一个HTML文档中,ID选择器只能使用一个,而且仅一次,而类选择器可以使用多次 (2)可以使用类选择器词列表方法为一个元素同时设置多个样式,我们可以为一个元素同时设置多个样式,但只可以用类选择器的方法实现,id选择器是不可以的,不能使用id词列表 ID选择器优先于类选择器 3.6:子选择器 还有一个比较有用的的选择器子选择器,即大于符号>,用来选择指定标签元素的第一代元素 3.7:包含(后代)选择器 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素,如右侧代码编辑器中的代码。 3.8:通用选择器(了解即可) *{color:red;}
*{margin:0;padding:0}//去掉页面样式 3.9:伪类选择符(一般用在链接的标签上面) 伪类选择器:a:link正常连接的方式 a:hover:鼠标放上去的样式 a:active:选择链接时的样式 a:visited:已经访问过的链接的样式 3.10:分组选择符
案例实验如下,运行结果暂不演示
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <title>实验</title>
5 <!--外部式css样式-->
6 <link href="3.html" rel="stylesheet" type="text/css"/>
7 <!--嵌入式css样式-->
8 <style type="text/css">
9 p{color:red;font-size:60px;}
10 div{color:blue;text-align:center;}
11 input{background-color:black;color:white}
12 table{text-align:center;border:1px red solid;}
13 .p1{font-family:"楷体";font-size:24px;}
14 .p2{font-family:"宋体";font-size:36px;}
15 </style>
16 </head>
17 <body>
18 <p>实验的内容</p>
19
20 <!--内联式css样式-->
21 <div style="font-size:30px">
22 今晚吃牛排
23 </div>
24 <!--选择器的使用-->
25 <form>
26 账号<input type="text" name="userId"><br/>
27 密码<input type="password" name="pw"><br/>
28 <div>好好学习将来涨工资</div>
29 </form>
30 <table>
31 <thead>
32 <tr>
33 <th>编号</th>
34 <th>姓名</th>
35 <th>性别</th>
36 <th>年龄</th>
37 </tr>
38 </thead>
39 <tbody>
40 <tr>
41 <td>10010</td>
42 <td>别先生</td>
43 <td>男</td>
44 <td>22</td>
45 </tr>
46 <tr>
47 <td>10010</td>
48 <td>别先生</td>
49 <td>男</td>
50 <td>22</td>
51 </tr>
52 <tr>
53 <td>10010</td>
54 <td>别先生</td>
55 <td>男</td>
56 <td>22</td>
57 </tr>
58 </tbody>
59 <tfoot>
60 <tr>
61 <td colspan="4">合计</td>
62 </tr>
63 </tfoot>
64 </table>
65 <!--类选择器的用法-->
66 <div>
67 <h1>春晓</h1>
68 <p class="p1">春眠不觉晓,处处闻啼鸟</p>
69 <p class="p2">夜来风雨声,处处闻啼鸟</p>
70 </div>
71 </body>
72 </html>
1 body{background-color:green;}
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <title>实验</title>
5 <style type="text/css">
6 /*{background-color:blue;}*/
7 #p1{font-family:"宋体";color:blue
8 ;font-size:30px;}
9 .p3{font-size:10px;color:yellow;}
10 .p2{font-size:40px;color:red;}
11 p > strong{color:red;font-size:15px;}
12 ul > li{color:blue;font-size:20px;}
13 table{font-size:25px;color:red; text-align="center";}
14 table tr th{font-size:20px;color:yellow;}
15 table tr td{font-size:25px;color:white;background-color:black;}
16 <!--display:inline(效果是不显示下划线)-->
17 .b1 li{display:inline;}
18 .b1 a{text-decoration:none;}
19 .b1 a:link{text-decoration:none;text-align:center;font-size:20px;}
20 .b1 a:hover{font-size:30px;color:red;}
21 .b1 a:active{font-size:40px;color:blue;}
22 .b1 a:visited{font-size:80px;color:blink;}
23 <!--分组选择符-->
24 p,h3{color:blue;background:yellow;font-size:30px;}
25 </style>
26 </head>
27 <body>
28 <ul class="b1">
29 <li><a href="#">首页</a></li>
30 <li><a href="#">公司简介</a></li>
31 <li><a href="#">公司产品</a></li>
32 <li><a href="#">联系我们</a></li>
33 <li><a href="http://www.baidu.com">百度</a></li>
34 <ul>
35 <p>javaweb工程师</p>
36 <h3>android工程师</h3>
37 <!--id选择器的用法-->
38 <p id="p1">今天是二零一六年八月十八日</p>
39 <!--class选择器使用多个样式,后定义的显示出来-->
40 <p class="p2 p3">春眠不觉晓,处处闻啼鸟,夜来风雨声,花落知多少</p>
41 <!--子选择器-->
42 <p>锄禾日当午,<strong>汗滴</strong>禾下土,<strong>谁知</strong>盘中餐,粒粒皆辛苦</p>
43 <ul>
44 <li>html</li>
45 <li>css</li>
46 <li>javascript</li>
47 <ul>
48 <li>html</li>
49 <li>css</li>
50 <li>javascript</li>
51 </ul>
52 </ul>
53 <!--包含选择器的使用联系;标签内设置样式必须使用=如border="1px";-->
54 <table border="1px">
55 <thead>
56 <tr>
57 <th>编号</th>
58 <th>姓名</th>
59 <th>性别</th>
60 <th>年龄</th>
61 </tr>
62 </thead>
63 <tbody>
64 <tr>
65 <td>10010</td>
66 <td>别先生</td>
67 <td>男</td>
68 <td>22</td>
69 </tr>
70 <tr>
71 <td>10010</td>
72 <td>别先生</td>
73 <td>男</td>
74 <td>22</td>
75 </tr>
76 <tr>
77 <td>10010</td>
78 <td>别先生</td>
79 <td>男</td>
80 <td>22</td>
81 </tr>
82 </tbody>
83 <tfoot>
84 <tr>
85 <td colspan="4">合计</td>
86 </tr>
87 </tfoot>
88 </table>
89
90 </body>
91 </html>
1 <html>/*实现某行特定元素的标记*/
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <!--link href="*.css" rel="stylesheet" type="text/css">-->
5 <title>实验</title>
6 <style type="text/css">
7 p:nth-child(2){
8 background:#ff0000;
9 }
10 </style>
11 </head>
12 <body>
13 <div>
14 <h1>悯农</h1>
15 <p>锄禾日当午</p>
16 <p>汗滴禾下土</p>
17 <p>谁知盘中餐</p>
18 <p>粒粒皆辛苦</p>
19
20 </div>
21 </body>
22 </html>
4:常见属性(百度搜索在线API,查询更多字体属性,火狐浏览器使用火狐firbug进行前段开发调正) 4.1:颜色属性 color属性定义文本的颜色 color:green; color:#ff6600; color:#f60; color:rgb(255,255,255); color:rgba(255,255,255,1); 4.2:字体属性 font-size:字体大小 font-famliy:定义字体 font-weight:字体加粗 4.3:背景属性 背景颜色:background-color; 背景图片:background-image; 背景重复:background-repeat; 背景位置:background-position; 简写方式: 4.4:文本属性 text-align:横向排列 line-height:文本行高 (1):%基于字体大小的百分比行高 (2):数值来设置固定值 text-indent:首行缩进 letter-spacing:字符间距 属性值:normal默认,length设置具体的数值,可以设置负数,inherit继承 4.5:边框属性 4.5.1:边框风格border-style; (1):统一风格(简写风格)border-style; (2):单独定义某一方向的边框样式 border-bottom-style:下边框样式 border-top-style:上边框样式 border-left-style:左边框样式 border-right-style:右边框样式 (3):边框风格样式的属性值 none:无边框 solid:直线边框 dashed:虚线边框 dotted:点状边框 double:双线边框 groove:吐槽边框 ridge:垄状边框 inset inset边框 outset outset边框 inherit继承 依托border-color的属性值 4.5.2:边框颜色border-color; (1):统一风格(简写风格) border-color; (2):单独风格 border-top-color:上边边框颜色 border-bottom-color:下边边框颜色 border-left-color:左边边框颜色 border-right-color:右边边框颜色 (3):属性值 颜色值得名称:red,yellow; RGB:rgb(255,255,0,0.1) 十六进制:#ff0,#ffff00; (4):属性值的四种方式 一个值:border-color:(上,下,左,右) 两个值:border-color:(上,下)(左,右) 三个值:border-color:(上)(下,左)(右) 四个值:border-color:(上)(下)(左)(右) 4.5.3:简写方式
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <!--link href="*.css" rel="stylesheet" type="text/css">-->
5 <title>实验</title>
6 <style type="text/css">
7 body{background:yellow;
8 /*background-color:blue;*/
9 /*background-image:url(image/1.jpg);*/
10 }
11 .p1{text-align:center;
12 <!--行距-->
13 line-height:120%;
14 <!--首行缩进-->
15 text-indent:35;
16 <!--字体之间的间距-->
17 letter-spacing:15px;
18 }
19 .p2{
20 width:300px;
21 height:450px;
22 border-color:red;
23 <!--边框的实线或者虚线-->
24 border-top-style:dashed;
25 border-left-style:solid;
26 border-bottom-style:dashed;
27 border-right-style:solid;
28 }
29 </style>
30 </head>
31 <body>
32 <p>锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦</p>
33 <p class="p1">好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,
34 天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,
35 好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,
36 天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,
37 好好学习,天天向上,</p>
38 <div class="p2">
39 </div>
40 </body>
41 </html>
5:DIV+CSS布局 5.1:div和span div和span在整个html标记中,没有任何意义,他们的存在就是为了应用css样式 div和span的区别在于,span是内联元素,div是块级元素 5.2:盒模型 5.2.1:margin 盒子外边距 5.2.2:padding 盒子内边距 5.2.3:border 盒子边框宽度 5.2.4:width 盒子宽度 5.2.5:height 盒子高度 5.3:布局相关的属性 5.3.1:position定位方式 (1):正常定位:relative (2):根据父元素进行定位:absolute (3):根据浏览器窗口进行定位:fixed (4):没有定位:static (5):继承inherit 5.3.2:定位 左left 右right 上top 下bottom离页面顶点的距离 5.3.3:z-index层覆盖先后顺序(优先级) 5.3.4:display显示属性(学习的重点) display:none层不显示 display:block块状显示,在元素后面换行,显示下一个块元素 display:inline内联显示,多个可以显示在一行内 5.3.5:float浮动属性 left:左浮动 right:右浮动
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <!--link href="*.css" rel="stylesheet" type="text/css">-->
5 <title>实验</title>
6 <style type="text/css">
7 .p1{
8 width:300px;
9 height:400px;
10 background-color:yellow;
11 margin:50px;
12 padding:50px;
13 border:10px blue dashed;
14 <!--浮动属性-->
15 float:right;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="p1">
21 <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="200px" height="300px" title="盒模型"/>
22 </div>
23 </body>
24 </html>
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <!--link href="*.css" rel="stylesheet" type="text/css">-->
5 <title>实验</title>
6 <style type="text/css">
7 .p1{
8 <!--绝对定位-->
9 position:absolute;
10 left:100px;
11 top:100px;
12 border:5px red solid;
13 <!--设置覆盖-->
14 z-index:2;
15 }
16 .p2{
17 position:absolute;
18 left:100px;
19 top:200px;
20 border:5px blue solid;
21 z-index:1;
22 }
23 </style>
24 </head>
25 <body>
26 <div class="p1">
27 <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>
28 </div>
29 <div class="p2">
30 <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>
31 </div>
32 </body>
33 </html>