CSS入门级学习

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

清除过的浮动

http://www.iyunlu.com/view/css-xhtml/55.html

542
来自专栏HTML5学堂

一步步教你弹性框架-下篇

HTML5学堂:本文继续为大家讲解弹性框架,在前两篇文章当中,我们从最基本的来回运动,讲解到缓冲运动、有摩擦力的运动。基本实现了弹性动画效果。今天我们主要来进行...

3694
来自专栏前端新视界

给单元素艺术添加动画

原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

1995
来自专栏hightopo

原 快速开发基于 HTML5 网络拓扑图应

2582
来自专栏Coco的专栏

不受控制的 position:fixed

1244
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

1455
来自专栏carven

利用canvas实现毛笔字帖(一)

最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

852
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

22710
来自专栏Small Code

【TensorFlow】理解 Estimators 和 Datasets

Google 在 2017 年 9 月 12 号的博文 Introduction to TensorFlow Datasets and Estimators 中...

8618
来自专栏一“技”之长

Android开发中基础动画技巧的应用 原

        我是先入门iOS的移动开发者,提到动画开发,iOS开发者很容易联想到3种方式,UIImageView的帧动画,UIView层的属性动画和Core...

812

扫码关注云+社区