初识CSS
前段的组成
结构语言:HTML (盖内房子毛坯房)涉及到布局设计
表现语言:CSS (装修 美化)
行为语言:JavaScript (安装电梯 基于事件)
1.了解CSS
CSS:Cascading Style Sheet级联/层叠样式
它是用来给我们的HTML做美化。事实上HTML也能做一些美化,但是为啥单独提出来CSS呢,因为降低耦合性,面向对象
CSS的样式非常丰富,这是HTML不可比拟的。
CSS的文件格式:.css
2.掌握CSS的基本语法
CSS使用示例:![1560320409024]()
3.掌握CSS的引入方式
行内样式表:直接在标签中通过style属性设置样式,每一个HTML标签都有此属性。
内部样式 表:在head标签中添加style标签,然后编写完整的css语法。
外部样式表:
本项目中的CSS文件
公网的CSS链接(CDN加速)
三种引入方式的优先设置样式。例如:h3 p级:行内样式表优先级最高>内部样式表和外部样式表谁在后面谁优先级高(代码是由上而下执行的,后面的相同设置会覆盖前面的)
4.掌握CSS的基本选择器
CSS中有三大基本选择器:
标签选择器:标签名就作为一种选择器,表示给对应的标签统一设置样式。例如:h3 p
类选择器:需要借助标签的class属性(应用最广泛的基本选择器)
ID选择器:需要借助标签的id属性
基本选择器优先级(范围越小,优先级越高):ID选择器>类选择器>标签选择器
5.掌握CSS的初级优化
5.1字体美化
字体类型:font-family
字体大小:font-size
字体的风格:font-style
字体的粗细:font-weight
一个字体属性设置所有字体样式:font
5.2 文本美化
文本颜色:color
文本对齐 方式:text-align(必须保证要设置的对齐是处于块元素内的)
块元素和行内元素:
在标准文档流中,我们的HTML的元素可以分为两大派 。
块元素:独占一行,可以设置宽度和高度等信息。例如:div ph1-h6…
行内元素:多个行内元素可以在一行展示内容,它不可 以设置宽度和高度等信息,内容撑开宽度和高度。a image span…
文本缩进:text-indent
文本行高:(行间距)
文本装饰:text-decoration
5.3超链接美化
伪类选择器,可以应用其他的标签,但是常用于a标签。
hover:可以设置鼠标悬浮在超链接标签上的样式
linked可以设置超链接未点击前的样式(等价于标签选择器直接设置)
visited可以设置超链接被 点击后的样式。
active可以设置超链接被点击但还未释放的样式。
5.4鼠标指针
小手型指针
wait加载中
help 帮助带问号
text文本光标型
crosshair 十字型
default 默认光标样式
5.5 背景美化
背景颜色设置:background-color
背景图片:background-image
背景尺寸:background-size
背景平铺:background-report
背景定位:background-position
背景属性background
6. 掌握列表的使用
在HTML中为我们准备了三种列表形式:无序列表,有序列表,定义列表。
无序列表:以符合为前缀的列表(应用最广是a标签之外的最常用的的)
有序列表:以有序的数字或者有序的符合(| || ||| A B C D)
定义列表:带小标题的列表形式
对于列表的样式设置,CSS有专门的属性。