JavaWeb(包括不限于HTML,CSS,JSC等）全过程学习记录（二）
CSS篇
目录
CSS篇
一. CSS技术介绍
二. CSS语法规则：
三. CSS是HTML的结合方式
1. 第一种
2. 第二种
3. 第三种
四. CSS选择器
1. 标签名选择器
2. id选择器
3. class选择器（类选择器）
4. 组合选择器
五. 常用样式
1. 颜色
2. 宽度
3. 高度
4. 背景颜色
5. 字体样式
6. 红色1像素实线边框
7. DIV居中
8. 文本居中
9. 超链接去下划线
10. 表格细线
11. 去除列表修饰
一. CSS技术介绍
CSS是层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
二. CSS语法规则：
选择器p{属性（font-size）: 值（80px）；}
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。
属性（property)：是要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明(declaration)，例如：p{color:blue}
多个声明：如果定义不止一个声明，则需要分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号),一般每行只描述一个属性。
例如：
p{
color:red;
font-size:30px;
}
CSS注释：/*注释内容*/
三. CSS是HTML的结合方式
1. 第一种
在标签的style属性上设置"key:value value;"，修改标签样式。
使用方法如图下：
第一个 第二个 第三个 
这种方式具有很多缺点：
（1）如果标签多了，样式多了，代码量非常庞大。
（2）可读性非常差。
（3）CSS代码没有复用性。
2. 第二种
在head标签中，使用style标签来定义各种自己需要的CSS样式。
格式如下：xxx{
key : value value;
}
CSS /*注释不一样*/ div{ border: 1px solid red; } span{ border: 1px solid red; } 第一个 第二个 第三个 注意CSS语言中的注释方法不同
这种方法的缺点：
（1）只能在同一页面复用代码，不能在多个页面中复用CSS代码。
（2）维护起来不方便，实际项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。
3. 第三种
把css样式写成一个单独的css文件，再通过link标签引用即可复用。
使用html的标签 导入css样式文件。
使用过程如下：
创建css文件
在css文件中输入页面样式
div{ border: 1px solid red;}span{ border: 1px solid red;}html中进行引用
CSS 第一个 第二个 第三个 然后运行即可达成想要的效果。
四. CSS选择器
1. 标签名选择器
标签名选择器的格式是：
标签名{
属性：值：
}
标签名选择器可以决定哪些标签被动地使用这个样式。
2. id选择器
id选择器的格式是：
#id属性值{
属性:值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
它们的使用方法如下：
标签名选择器 div{ border: 1px solid red; color: blue; font-size: 30px; } #id001{ border: 1px dashed red; color: blue; font-size: 30px; } div标签1 div标签23. class选择器（类选择器）
class类型选择器的格式是：
.class属性值{
属性：值；
}
class类型选择器可以通过class属性有效地选择性地去使用这个样式。
它的使用方法如下：
.class01{ color: blue; font-size: 20px; border: 1px solid red; } 标签14. 组合选择器
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性：值；
}
组合选择器可以让多个选择器共用同一个css样式代码。
使用方法如下：
.class01,#id01{ color: blue; font-size: 20px; border: 1px solid red; } 标签1 span标签
五. 常用样式
1. 颜色
color:red;
颜色以可以写颜色名red,blue等，也可以写rab值和十六进制表示值：如rgb(255,0,0),#00F6DE（十六进制必须前加#）
2. 宽度
width:19px
宽度可以写像素值：10px；也可以写百分比值：20%。
3. 高度
height：20px
高度可以写像素值：10px；也可以写百分比值：20%。
4. 背景颜色
background-color:#0F2D4C
5. 字体样式
color:#FF0000;字体颜色红色
字体大小：font-size:30px;
6. 红色1像素实线边框
border：1px solid red;
7. DIV居中
margin-left:auto;
margin-right:auto;
8. 文本居中
text-align:center;
9. 超链接去下划线
text-decoration:none;
10. 表格细线
table{ border:1px solid black;/*设置边框*/ border-collapse:collapse;/*将边框合并*/ } td,th{ border:1px solid black;/*设置边框*/ }11. 去除列表修饰
ul{
list-style:none;
}
