1、CSS简介
1.1 HTML的局限性
HTML只关注内容的语义
1.2 CSS
1、CSS是层叠样式表(Cascading Style Sheet)的简称
2、CSS也是一种标记语言
3、CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观样式
总结:
- HTML主要做结构,显示元素内容
- CSS美化HTML,布局网页
- CSS最大价值:由HTML专注做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离
1.3 CSS语法规范
CSS规则由两个主要的部分组成:选择器以及一条或多条声明
- 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;“进行区分
1.4 CSS代码风格
1、样式格式书写
- 紧凑格式
- 展开格式(推荐)
2、样式大小写
一般用小写字母书写
- 属性值前面,冒号后面,保留一个空格
- 选择器(标签)和大括号中间保留空格
2、CSS基础选择器
2.1 CSS选择器的作用
作用:选择标签
2.2 选择器分类
1、基础选择器
- 由单个选择器组成
- 包括标签选择器、类选择器、id选择器和配通符选择器
2.3 标签选择器
用HTML标签名称作为选择器,按照标签名称分类,为页面中某一类标签指定统一样式的CSS样式
语法
标签名{
属性1: 属性值1;
...
}
作用
可以把某一类标签全部选择出来
优点
能快速为页面中同类型的标签统一设置样式
缺点
不能设计差异化样式,只能选择全部的当前标签
2.4 类选择器
若想差异化选择不同的标签,单独选择一个或某几个标签,可以使用类选择器
类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点”."号显示。
.类名 {
属性1: 属性值1;
...
}
语法
结构需要用class属性来调用class类的意思
<div class='red'>
红色
</div>
类命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
1、多类名使用方式
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签可以分别具有这些类名的样式
2、多类名开发中使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 节省CSS代码,统一修改也非常方便
2.5 id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”定义
语法
#id名 {
属性1: 属性值1;
...
}
与类选择器大的区别:
- 只能调用一次,别人切勿使用(id名唯一)
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用
2.6 通配符选择器
在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)
语法
* {
属性1: 属性值1;
...
}
- 通配符选择器不需要调用,自动就给所有的元素使用样式
- 特殊情况才使用
3、CSS字体属性
3.1 字体系列
CSS用font-family属性定义文本的字体系列
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
4、CSS文本属性
4.1 文本颜色
color属性用于定义文本颜色
表示 | 属性值 |
---|---|
预定义的颜色值 | red, grennd, blue等 |
十六进制 | #FF0000, #FF6600, #29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
4.2 对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
属性值 | 解释 |
---|---|
left | 左对齐(默认) |
right | 右对齐 |
center | 居中 |
4.3 装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
属性值 | 描述 |
---|---|
none | 默认。(没有装饰线) |
underline | 下划线。链接a自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
8、盒子模型
8.1 看透网页布局的本质
网页布局过程:
1、先准备好相关的网页元素,网页元素基本都是盒子Box
2、利用CSS设置好盒子样式,然后摆到相应位置
3、往盒子里面装内容
8.2 盒子模型(Box Model)组成
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容
8.3 边框(border)
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框简写:
boder: 1px solid red; 没有顺序