Javaweb基础知识chapter02 - CSS

CSS

---

第1章 CSS简介

CSS全称为“层叠样式表 (Cascading Style Sheets)”，主要用于定义HTML元素（或内容）在浏览器内的显示样式，如文字大小、颜色、字体、边框、位置等。

---

第2章 CSS基本语法

2.1 基本格式

• CSS样式由选择器和声明组成，而声明又由属性和值组成，如下图所示：

• 格式为：

选择器 {

​ 样式名：样式值;

​ 样式名：样式值;

​ … …

}

2.2 语法说明

• 属性和值用冒号隔开，并由花括号包围，组成一个完整的样式声明，例如：p {color: blue}

• 多个声明之间需要用英文分号”;”隔开。

• 每行最好只描述一个属性

• CSS对大小写不敏感，但建议使用小写。不过存在一个例外：class 和 id 名称对大小写是敏感的。

• CSS注释：*/注释内容*/

2.3 CSS样式编写位置

方式一： 写在标签的style属性中：

<p style=“font-size:30px”>字体大小用px表示</p>

<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞</p>

方式二： 写在html头的style标签中(style标签一般写在head标签与title标签之间)：

<style type="text/css">
	p{
		color:blue;
        background-color: yellow;
	}
</style>

方式三： 写在外部的css文件中，然后通过link标签引入外部的css文件

<link rel="stylesheet" type="text/css" href="style.css"> 

其中，style.css定义如下：

@charset "UTF-8";
/* 这是css与html结合使用的第三种方式  */
div { 
	border: 1px solid red; 
} 
span {
	border: 1px solid green; 
}

说明：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

优先级：行内样式 > 内部样式 > 外部引入

---

第3章 选择器的分类

分类1：标签选择器

按照标签名选中相应的元素。如下图的p。

p {
	color:red;
}

分类2：类选择器

按照元素的类名选中相应的元素，使用 .类名

.类名{

}

举例：

<p class=”foot”>青春正好</p>
<b class=”foot”>编程趁早</b>


.foot {
	color:red;
}

分类3：ID选择器

按照元素的id选中相应的元素，使用 #id名

 #id名 {
 
 }

举例：

<p id=”abc”>大家好</p>

#abc {
	color:red;
}

分类4：组选择器

可以同时使用多个选择器选中一组元素，使用 ，分隔不同的选择器。

选择器1，选择器2，……，选择器N{
	color：red；
}

举例：

#div1,.mini{
	background-color:red;
}

分类5：派生选择器

根据上下文关系，选择元素的后代元素，使用 空格 隔开

选择器1  选择器2 … {
   color:red;
}

注意：id选择器 > 类选择器 > 标签选择器

---

第4章 常用样式

4.1 颜色

• 使用RGB表示：color: rgb(255,0,0);

• 使用十六进制表示：color: #FF0000;

• 使用颜色名表示：color: red；

4.2 宽度

• 使用像素值表示：width: 19px；
• 使用百分比表示：width: 20%；

4.3 高度

• 使用像素值表示：height: 19px；
• 使用百分比表示：height: 20%；
  
  

4.4 背景颜色

background-color:#0F2D4C

4.5 扩展

4.5.1 字体样式

字体颜色	color: #bbffaa;
字体大小	font-size: 20px;

4.5.2 黑色1像素实线边框

border: 1px solid black;

4.5.3 DIV居中

margin-left: auto;
margin-right: auto;

4.5.4 文本居中

text-align: center;

4.5.5 超链接去下划线

text-decoration: none;

4.5.6 表格细线

table {
	/*设置边框*/
	border: 1px solid black;
	/*将边框合并*/
	border-collapse: collapse;
}
	
td,th {
	/*设置边框*/
	border: 1px solid black;
}

4.5.7 列表去除修饰

ul {
	list-style: none;
}

---

第5章 CSS中的注释语句

• 用 /* 注释语句 */标明。