JavaWeb1——第 2 章 CSS

第 2 章 CSS

1. css 简介

• CSS 指层叠样式表 (Cascading Style Sheets)。主要用来设置网页中元素的样式。如边 框，颜色，位置等…
• CSS 即可以现在 HTML 中，也可以写在元素的 style 属性里面，还可以写在.css 外部文 件里然后引入到页面

2． 基本语法

2.1 语法规范

• 写在外部文件或者 html 头标签里的时候。

选择器 { 
		   样式名：样式值; 
			样式名：样式值; 
			………… 
			} 

• 写在元素的 style 属性里面的时候。
  “样式名：样式值；样式名：样式值；……”

<p style=”color:red;font-size:16px;”>
你好呀！
</p> 

2.2 编写位置

• 内部

标签的 style 属性中：

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

写到 html 头的 style 标签中

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

• 外部

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

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

3．选择器

3.1 标签选择器

按照标签名选中相应的元素。

p { 
	color:red; 
	} 

3.2 Id 选择器

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

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

#abc {
	color:red; 
	} 

3.3 类选择器

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

<p class=”foot”>你好</p> 
<b class=”foot”>你也好</b> 

.foot {
	color:red; 
	} 

3.4 组选择器

可以同时使用多个选择器选中一组元素，使用“，”分隔不同的选择器 ，或者使用空格

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

#navbar ul li a{
    display: block;
    padding: 20px;
    text-align: center;
}

4．常用样式

4.1 颜色

color：red；

• 颜色可以写颜色名如：black, blue, red, green, white, yellow 等
• 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制 值必须加#

4.2 宽度

width:19px; 

• 宽度可以写像素值：19px；
• 也可以写百分比值：20%；

4.3 高度

height:20px; 

• 同宽度一样

4.4 背景颜色

background-color:#0F2D4C 

4.5 常见 CSS 样式

• 字体样式

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

• 黑色 1 像素实线边框

border: 1px solid black;

• DIV 居中

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

• 文本居中

text-align: center;

• 超链接去下划线

text-decoration: none;