初识及入门

css概念

• Cascading Style Sheet 层叠级联样式表，用来控制网页的样式，美化网页
• html：做网页的布局（结构）—结构层
• css：控制显示的样式（美观）—行为层
• js：控制网页的行为（与用户交互）—交互层

CSS在网页中的应用

在网页中，主要有以下应用：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

CSS的发展史

CSS1.0

CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1：浮动、定位

CSS3.0：圆角、阴影、动画....浏览器兼容性

CSS的优势

• 内容和表现分离
• 网页结构表现统一，可以实现复用
• 样式十分丰富
• 建议使用独立于HTML的css文件
• 利用SEO，容易被搜索引擎收录

---

css基本语法

语法： 选择器{声明} 

    
    
    
    
    




一级标题

---

3种引入的方式

行内样式

行内样式：在标签元素中，编写一个style属性，编写样式皆可

    
    



一级标题

内部样式

在head中的style标签中，编写样式即可

    
    

    
    


一级标题

外部样式

在head中，通过link标签指向css文件，使样式生效

css规律

就近原则！！！

当同一个标签存在多个样式时，哪个离这个标签近就用哪个，图示优先级为：行内样式>外部样式>内部样式

 拓展：外部样式的两种写法

• 链接式：

　　　html

• 导入式：

　　   CSS2.1

首页link和import语法结构不同，前者是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要

学Java

记笔记

• id：格式 #id名称{} ；全局唯一

    
    

    



标题1
标题2
标题3

• class：格式.class名称{} ；选择所有class属性一致的标签，跨标签；好处：可以多个标签归到一个class里面，实现复用

    
    

    



标题1
标题2
标题3

思考：当同一个标签同时存在class、id、标签会执行哪一个？

答案：id>class>标签

    
    

    



标题1

高级选择器

• 层次选择器

 1 
 2 
 3 
 4     
 5     
 6 
 7     
32 
33 
34 
35 
p1
36 
p0
37 
p2
38 
p3
39 

40     

41         
p4
42     
43     

44         
p5
45     
46     

47         
p6
48     
49 
50 
51 

• • 后代选择器（空格）：某个元素的后面；逻辑关系类型~祖爷爷-->爷爷-->爸爸-->you；逻辑关系里面p标签包括p标签的子标签、子子标签均生效

    /*后代选择器*/
    body p{
           background: red;
    }

  • 子选择器（>）：只有一代~只有儿子；只有子选择器p标签生效，p标签里面的子标签、子子标签不生效

    /*子代选择器*/
    body>p{
          background: #3cbda6;
    }

  • 相邻弟弟选择器(+)：同辈；示例代码active相邻的下面的p标签生效，相邻只管向下的，不管向上的，上面的p标签不生效

    /*相邻弟弟选择器：只有一个，相邻（向下）*/
    .active + p{
           background: #53f69d;
    }

  • 通用兄弟选择器(~)：当前选中元素的向下的所有同级兄弟元素生效

    /*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
    .active ~ p{
           background: #53f69d;
    }

• 结构伪类选择器

 1  /*ul的第一个子元素*/
 2  ul li:first-child{
 3      background: #53f69d;
 4  }
 5  /*ul的最后一个子元素*/
 6  ul li:last-child{
 7      background: #f69e80;
 8  }
 9  /*选择p1 ：定位到父元素，选择当前第一个元素
10  选择当前p元素的父级元素，选中父级元素中的第一个，并且是当前元素才生效！按照顺序去取
11  */
12  p:nth-child(2){
13      background: aliceblue;
14  }
15  /*选中父元素下的p元素的第二个，按照类型去取*/
16  p:nth-of-type(2){
17      background: aqua;
18  }

• 属性选择器（重点！！！）

 1 
 2 
 3 
 4     
 5     
 6 
 7     
36 
37 
38 
39 

40     
li1
41     
li2
42     
li3
43     
li4
44     
li5
45     
li6
46     
li7
47     
li8
48     
li9
49 
50 
51 

美化网页

为什么要美化网页

• 有效的传递页面信息
• 美化网页，页面漂亮，才能吸引用户
• 凸显页面的主题
• 提高用户的体验

span标签：重点要突出的字，使用span套起来；行业默认的规则

    
    

    



学习Java

---

字体

• font-family：字体样式
• font-size：字体大小
• font-weight：字体粗细
• color：颜色

 1 
 2 
 3 
 4     
 5     
 6 
 7     
19 
20 
21 
出师表
22 
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
23 
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
24 
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
25 
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
26 
亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
27 
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
28 
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
29 
愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言。深追先帝遗诏，臣不胜受恩感激。
30 
今当远离，临表涕零，不知所言。
31 
32 

---

排版网页

• text-align：位置排版
• text-indent：首行缩进
• line-height：行高，行高和块的高度一致，就可以上下居中
• text-decoration：上中下划线
• vertical-align：middle文本图片水平对齐

    
    

    

    


出师表
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言。深追先帝遗诏，臣不胜受恩感激。
今当远离，临表涕零，不知所言。

---

超链接伪类

hover

 1 
 2 
 3 
 4     
 5     
 6     
18 
19 
20 百度
21 
22 

---

列表样式

list-style：

• none：去掉圆点
• circle：空心圆
• decimal：数字
• square：正方形

 1 
 2 
 3 
 4     
 5     
 6 
 7     
21 
22 
23 
24 

25     
li1
26     
li2
27     
li3
28     
li4
29 
30 
31 

---

背景样式

背景颜色

background，前面的例子都有，测试人员了解上述的就够了

背景图片

background-repeat:作用相当于windows设置壁纸时寻找的契合度一样

• 默认全部平铺
• repeat-x:水平平铺
• repeat-y：竖向平铺
• no-repeat：不平铺
• ......

渐变背景参考网址：http://www.grabient.com

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

边框border

border表示盒子的边界，它可以设置成可见的，样式多样的。最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。

• border-top：上边界
• border-bottom：下边界
• border-left：左边界
• border-right：右边界

/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

---

内边框padding

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。与margin类似，padding包含了上下左右四条边，可以单独设置每一条边的边距。

• padding-top：上部填充
• padding-bottom：下部填充
• padding-left：左部填充
• padding-right：右部填充

---

外边框margin

margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• margin-top：上边距
• margin-buttom：下边距
• margin-left：左边距
• margin-right：右边距

/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

 备注：该篇笔记后续还会补充，盒子还不全；还有浮动、定位两个大模块未补充