JavaWeb开发-CSS基础

2.CSS层叠样式表基本语法

• 层叠样式表，用来控制页面的样式

（1)CSS的三种引入方式

内部样式表：适合学习使用，将CSS代码写在style标签里面，style标签嵌套在title里

• 外部样式表：开发常使用，将CSS代码写在单独的CSS文件中.css；在HTML中使用link标签引入：

href放css文件的路径；link标签写在title的下一行，head前一行

rel = "stylesheet"表示引入的是层叠样式表CSS

CSS写在style属性值里

（2)CSS三种颜色设置方式

CSS具有三种颜色设置方式

• 1.关键字表示

color:red;
color:yellow;
color:green

• 2.rgb表示法

通过红绿蓝三原色来设置，每项取值范围为0-255

color:reb(0,0,0);
color:rgb(0,255,255);

• 3.十六进制表示法（用的最多）

"#"开头，将颜色转换为数字的十六进制表示

color:#083232;

（3）CSS基础选择器

标签选择器

• 根据标签名称来选取需要设置样式的标签，将所选中的标签全部设置为选择器内的样式

元素名称{
	color:red;
}

h1{
    color:red;
}

id选择器

• 为标签指定一个ID属性，为设置了该ID的所有标签设置选择器内的样式
• 同一个ID选择器在一个页面只能使用一次

#id属性值{
    color:red;
}

/*定义id选择器*/
<style>
    #red{
        color:red;
    }
</style>

<!--使用id选择器-->
<div id = "red">内容</div>

类选择器

• 与ID选择器不同的是，一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开

• 类名单词之间可以用-连接，news-hd

（4）首行缩进

属性名称：text-indent

单位：px

p{
    text-indent:50px;
}

（5）文本对齐属性

属性名称：text-align

属性值：center left right

h1{
    text-align:center;
}

h2{text-align:left;}

h3{text-align:right;}

3.盒子模型

（1）盒子组成

• 内容区域-width & height
• 内边距 - padding（出现在内容与盒子边缘之间）
• 边框线 - border
• 外边距 - margin （出现在盒子外面)

（2）盒子边框线

• 属性名：border
• 属性值：边框线粗细 线条样式 颜色

• 设置单方向边框线
  
  

（3）盒子模型-内边距

• 作用：设置内容与盒子边缘之间的距离
• 属性名：padding / padding - 方位名词

• padding多值写法

（4）盒子模型 - 尺寸计算

• 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

• 如何进行内减防止盒子被撑大？ ： 在盒子中添加属性如下：

box-sizing:border-box;

（5）盒子模型 - 外边距

• 作用：拉开两个盒子之间的距离
• 属性名：margin
• 与padding属性值写法和含义相同
• 版心居中写法：margin: 0 auto; 注意盒子要求有宽度