css:
- 层叠样式表
- 渲染html到网页
- css存在样式表当中
- 外部样式表提高工作效率
- 多个样式可以层叠为一个
html标签分为几种类型:
- 按照是否换行来分:
- 行级元素
- 块级元素
- 根据是否闭合来分:
- 完全闭合
- 自闭和
css样式的写法规则:
- 属性:值;
css里面的颜色值:
- 单词值 、十六进制颜色值 :#000000、rgb :rgb(110,255,255) 、rgba(110,255,255,0.5) 0.5为透明度。
网页里面的像素单位 :
- px 代表固定像素值,相对屏幕的分辨率的单位值 。
- % 百分比像素值
- rem 相对单位 只相对于,网页的html根元素的字体大小。
- em 相对单位 相对当前元素文本字体大小,没有设置字体 默认浏览器默认字体大小。
css里面设置宽高属性:
- 当前元素必须是块级元素 ,如果要给行级元素设置宽和高必须转化为块级元素。
css 在网页里面分为几种类型:
- 行内样式
- 内嵌样式
- 外部样式
基本样式:
- color: red; 控制字体颜色的
- font-size: 20px;
- 默认的属性值 larger x-larger small x-small 通常用px
- font-family: serif; 设置字体的
- width: 200px; 设置宽
- height: 200px; 设置高
- border: 1px solid #000; 设置边框
样式属性:
- 单属性样式
- 复合属性样式
一、行内样式:
代码如图所示:
网页效果如图:
二、css内嵌样式:
- 内嵌的位置 :在head标签里面 或者内嵌到body里面
- 使用style标签内嵌到head或者body里面
- 通过css选择器来匹配样式
css选择器:
- * 代表所有元素 匹配网页里面的所有元素
- element 代表元素
- class 代表类名称
- id 代表id
- 子父选择器 --空格 >
- 复合选择器 使用都好分割
- 命名class id 的时候不要使用纯数字 数字不要开头
代码如下:
网页效果如图:
三、外部样式:
在外部写样式表网页内部引入
外部样式的引入使用link 标签
可以引入在 head 或者body,还可以在内嵌样式里面引入。代码如图:
网页效果如图:
四、css样式优先级:
- 如果样式之间没有冲突:则样式的优先级是 样式进行叠加 :
- 行内> 内嵌 > 外部 (内嵌样式在 外部样式加载之后)
- 行内> 外部 >内嵌 (内嵌样式在外部样式之前加载)
- 如果样式之间存在冲突,样式优先级是 样式就近原则选取
- 行内> 内嵌 > 外部 (内嵌样式在 外部样式加载之后)
- 行内> 外部 >内嵌 (内嵌样式在外部样式之前加载)
内嵌样式选择器优先级:
id选择器>class类选择器>元素选择器>*选择器代码如图:
行内样式、外部样式、内嵌样式的优先级比较:
代码如图:
网页效果图:
内嵌样式和外部样式也存在优先级,指的是元素选择器之间的优先级,外部样式里面选择器的优先级和内嵌样式选择器优先级一致。
代码如图:
网页效果如图:
web前端基础知识——css篇
猜你喜欢
转载自blog.csdn.net/weixin_46910841/article/details/105522890
今日推荐
周排行