JavaWeb系列笔记二——CSS

CSS

页面美化和布局控制（层叠样式表）

概念

Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处

• 功能强大
• 将内容展示和样式控制分离
  • 降低耦合度。解耦
  • 让分工协作更容易
  • 提高开发效率

CSS的使用

CSS与HTML结合使用

• 内联样式
  • 在标签内使用style属性指定css代码
  • 范例

<div style="color:red;">hello</div>

• 内部样式
  • 在head标签内，定义style标签，style标签的标签体内容就是css代码
  • 范例

<style>
	div{
		color:blue;
	}
</style>
<div>hello css</div>

• 外部样式
  • 定义css资源文件

<!-- ./a.css文件 -->
div{
	color:green;
}

<!-- html文件中 -->
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>

注意：

• 1，2，3种方式，css作用范围越来越大
• 第1种方式不常用，后期常用2，3

CSS语法

格式：

选择器{
	属性名1：属性值1;
	属性名2：属性值2;
	...
}

• 选择器：
  筛选具有相似特征的元素

注意：每一对属性需要使用；隔开，最后一对属性可不加；

选择器

基础选择器

• id选择器：选择具体id属性值的元素，建议在一个html页面中id值唯一

#id{...}

• 元素选择器：选择具有相同标签名称的元素

标签名{...}

id选择器优先级高于元素选择器

• 类选择器：选择具有相同class属性值的元素

.class{...}

类选择器优先级高于元素选择器

拓展选择器

• 选择所有元素

*{...}

• 并集选择器

选择器1，选择器2{...}

• 父选择器

div > p{...}

选择所有<p>元素的父级<div>元素

• 子选择器

div + p{...}

选择所有紧接着<div>元素后面的<p>元素

• 属性选择器：选择元素名称，属性名=属性值的元素

元素名[属性名="属性值"]{...}

• 伪类选择器：选择一些元素具有的状态

元素：状态{...}

• 状态：
  • link：初始化的状态
  • visited：被访问的状态
  • active：正在访问的状态
  • hover：鼠标悬浮状态

属性

• 字体、文本
  • font-size：字体大小
  • coloer：文本颜色
  • text-align：对齐方式
  • line-height：行高
• 背景
  • bockground
• 边框
  • border：设置边框，符合属性
• 尺寸
  • width：宽度
  • height：高度
• 盒子模型：控制布局
  • margin：外边框
  • padding：内边框
    • 默认情况下内边距会影响整个盒子的大小
    • box-sizing：border-box;设置盒子的属性，让width和height就是最终盒子的大小
• float：浮动
  • left
  • right