css初体验
- 一.css引入方式
- 二. 标签选择器
- 三.类选择器
- 四. id选择器
- 五.通配符选择器
- 六.画盒子
- 七.文字控制属性
- 八.水平对齐方式-图片
- 九.文本修饰线
- 十.文字颜色取值
- 十一.调试工具
- 十二.复合选择器
- 十三.伪类选择器
- 十四.css的特性
- 十五.背景图
- 十六.背景图位置
- 十七.背景图的缩放
- 十八.标签的显示模式
- 块级标签转行内块
- 行内标签转块级标签
- 十九.总结
一.css引入方式
1.内部样式
css代码写在style标签里面
style是在html中的head标签内部
2,外部样式
在外部css文件,通过link引入
link也是在head标签内部
二. 标签选择器
特点:
-使用标签名作为选择器
-选择相同的标签名,设置相同的样式
运行结果:
ps: 标签选择器无法对相同标签进行样式差异化设置
三.类选择器
-找到对应标签设置一个class名称
-通过.+类名{
属性
}进行样式设置
-可以让不同的标签设置不同的样式,相同类名设置成一致属性
不同类名就可以设置不同的属性
-可以给标签设置多个类名,中间用空格隔开
运行结果:
四. id选择器
作用: 查找标签,差异化设置标签的显示效果
场景: id选择器哦一般配合JavaScript使用,很少用来设置css样式
-定义id选择器--> #id{}
-使用id选择器--> 在标签中加入id="id名"
ps:**同一个id选择器在一个页面中只能使用一次**
运行结果:
五.通配符选择器
通配符*
*{
可以清除页面所有标签的一些默认样式
也可以给所有标签设置相同样式
}
运行结果:
六.画盒子
运行结果:
七.文字控制属性
字体大小 font-size
谷歌浏览器字体大小默认是16px
pc端常用单位px
p{
font-size:10px;
}
字体加粗 font-weight(不需要单位)
400/normal代表不加粗
700/bold代表加粗
字体倾斜 font-style(fs)
运行结果:
行高
行高的组成: 上间距+文字大小+下间距 (上间距和下间距相等
取值是数字代表的是字体大小的倍数
垂直居中: 只需要行高的值和盒子高度的值一致
运行结果:
文本缩进text-indent : 一般是用来缩进文本
属性值:
数字+px
**数字+em (1em = 当前标签的字号大小)**(推荐)
第二种会随着字体自动变化
em属于相对单位,相对自己的文字大小进行缩进操作
1em相当于当前标签内一个文字的大小
运行结果:
文本对齐方式::控制文本的水平对齐方式(text-align)
运行结果:
八.水平对齐方式-图片
**text-align本质是控制内容的对齐方式,属性要设置给内容的父级**
对图片宽度进行设置,图片会等比例缩放
运行结果:
九.文本修饰线
去除a标签颜色 color
去除a标签的下划线 text-decoration: none
删除线 text-decoration: line-through
上划线:text-decoration: overline
下划线L:text-decoration: underline
运行结果:
十.文字颜色取值
我们在开发过程中一般都是使用rgb和十六进制的的表示法
在使用rgb的颜色表示法时,有第四个参数,是可以用来设置背景的透明度的(0-1),0是完全透明,1是不透明
运行结果:
十一.调试工具
首先我们运行代码打开浏览器,可以直接按F12打开开发者工具,点击左上角箭头箭头会变成蓝色,再点击页面出错的地方,查看样式框中是否出错
十二.复合选择器
有两个或多个基础选择器,通过不同方式组合而成
作用:更准确更高效的选择目标标签
1.后代选择器
后代选择器
语法: 父选择器 子选择器{
属性名: 属性值;
}
运行结果:
2.并集选择器
选中多组要设置相同样式的标签,标签之间用逗号相隔
运行结果:
十三.伪类选择器
伪类选择器
表示元素的状态,选中元素的某个状态设置样式
鼠标悬停状态: 选择器:hover{css属性}
作用:鼠标悬停在元素上,元素的样式
运行结果:
鼠标悬停后
十四.css的特性
1.css的继承性
css的继承性
文字控制属性可以被继承
a标签不会继承父标签的颜色属性
标题标签不能继承父标签的字体大小
运行结果:
2.css的层叠性
特点: 相同的属性会覆盖: 后面的css属性覆盖前面的css属性
不同的属性就会叠加,不同的css属性都会生效
运行结果:
3.css的优先级
当一个标签使用了多种选择器时,会根据选择器优先级生效样式
通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
***选择标签的范围越大,优先级越低***
运行结果:
!important优先级\最高
运行结果:
十五.背景图
用图片去装饰页面的背景
background-image:url(图片地址)
图片背景默认会有一个平铺效果
通过background-repeat:no-repeat;使得背景图不平铺
运行结果:
十六.背景图位置
使用background-position:水平方向位置 垂直方向位置
1.可以使用关键字进行设置center right left等等
2.可以使用坐标(数字+px,正负都可以)
水平:正数向右,负数向左
垂直: 正数向下,负数向上
可以只写一个关键字,另一个方向默认为居中
数字只写一个值表示水平方向,垂直方向为居中
运行结果:
十七.背景图的缩放
background-size:
contain:这个是背景图从盒子的左上角开始缩放,当碰到盒子的右边或下面这条边就会停止缩放,导致盒子会留白
运行结果:
cover:这个是只有当盒子被完全覆盖背景图才会停止缩放
,会导致背景图内容被切割
运行结果:
十八.标签的显示模式
块级元素block
**--h1,p,div,有序(ol li)和无序(ul li)列表,table**
-独占一行
-宽度默认是父级的100%
-添加宽高属性生效
行内元素
-span a
一行可以显示多个
设置宽高属性不生效
宽高尺寸有内容撑开
行内块元素inline-block
一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开
块级标签转行内块
运行结果:
行内标签转块级标签
运行结果:
运行结果
