CSS笔记
一、功能与概念
- 概念:
Cascading Style Sheets
:层叠样式表- 层叠:多个样式可以作用在同一个HTML的元素上,并同时生效
- 功能:HTML负责展示页面信息,而CSS主要数负责页面美化与布局控制
- 好处:HTML的标签属性与CSS都可以控制样式。CSS的好处在于:
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率。一套CSS可以复用与多个HTML文档
二、CSS使用-与HTML的结合方式
内联结合
- 在HTML标签内使用 style 属性指定CSS代码,采用键值对的方式,键是属性名,值是对应的值。由;分隔多个键值对 冒号表示键值的对应
<div style="color: darkgoldenrod;"></div>
- 缺点:信息展示与美化在同一处,没有达到解耦的效果
内部样式
在head标签内定义style标签,style标签体内容就是CSS代码
<head> ... <!--在head标签内定义style标签,写CSS代码--> <style> div{ /*这样下面所有div元素内容就可以变色*/ color: greenyellow; } </style> </head> ... <div>内联样式</div>
外部样式
1.定义CSS资源文件。
2.在
head
标签内,定义link
标签,引入外部资源文件//a.css资源文件 div{ color: darkorange; }
//HTML文档 <head> <link rel="stylesheet" href="css/a.css"> </head> <body> <div>CSS外部样式</div> <div>HelloCSS</div> </body>
3.另一种写法【在head标签内使用style标签导入资源文件】
<style> @import "css/a.css"; </style>
注意!
- 1 2 3种方式,CSS的作用范围越来越大
- 1方式不常用【耦合度高,作用范围小】,后期常用的是2 3方式
三、CSS语法
格式
选择器{ 属性1:属性值 属性2:属性值 ... }
多个属性之间需要使用分号
;
隔开。最后一对属性可以不添加选择器:筛选具有相似特征的元素【选择器是
div
则只找div标签包裹的】
四、选择器
分类
基础选择器-功能单一
id选择器
- 概念:选择具体的id属性值的元素
- 语法:
#id属性值{...}
- 注:建议在同一个HTML页面中id值唯一
元素选择器
- 概念:选择具有相同名称的元素
- 语法:
标签名{...}
- 注:id选择器优先级高于元素选择器
类选择器
- 概念:选择具有具有相同class属性值的元素
- 语法:
.class属性值{...}
- 注:id选择器优先级高于类选择器,类选择器优先级高于元素选择器
三种选择器实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学习CSS基础选择器</title> <style> #div1{ color: red; font-size: 20px; } #div2{ color: cadetblue; } div{ color: aqua; } .p1{ color: greenyellow; } </style> </head> <body> <!--id选择器--> <div id="div1">id选择器div1</div> <div id="div2">id选择器div2</div> <hr> <!--元素选择器--> <div>未指定id的元素选择器div1</div> <div>未指定id的元素选择器div2</div> <hr> <!--类选择器--> <p class="p1">类选择器p标签1</p> <p class="p1">类选择器p标签2</p> <p class="p1">类选择器p标签3</p> </body> </html>
扩展选择器-功能强大
*{}
选择器:选择所有元素*{ color:red;}
子选择器:某个标签下的子标签生效
<!-- 在div标签下的p标签会生效--> div p{ color:red;}
父选择器:某个标签上的父标签会生效
<!--p标签上的div标签会生效 --> div > p{ color:red;}
并集选择器:多个标签一起生效
<!--div与p标签都会生效 --> div, p{ color:red;}
属性选择器:对应属性值的标签会生效
语法:选择元素名[属性名=属性值]
<!--type取值为text的属性会生效 --> input[type='text']{ color:red;}
伪类选择器:选择一些元素具有的状态
语法:元素:状态
- 如
<a>
的状态:- link:初始化状态
- hover:鼠标悬停
- active:正访问
- visited:被访问过
- 如
<!--初始化状态--> a:link{ color: #e67e22; } <!-- 鼠标悬停颜色 --> a:hover{ color: #34495e; }
五、CSS属性
- 字体
font-size
:字体大小font-sytyle
:字体样式 斜体、粗体...font-family
:字体系列 楷体、正体
- 文本
color
:文本颜色text-align
:文本对齐方式line-height
:文本行高
- 背景
background
:背景 复合属性,其图片、颜色可以单独设置
- 边框
border
:设置边框 border是复合属性,其上下左右边可以单独设置
- 尺寸
width
:宽度height
:高度
- 盒子模型:控制布局
margin
:外边距margin: auto
:水平居中
padding
:内边距- 默认情况下内边距会影响整个盒子的大小
box-sizing: border-box;
设置盒子的属性,让宽高就是自己设置盒子的大小
float
:浮动left
:左浮动right
:右浮动