我是靠谱客的博主 调皮西牛,最近开发中收集的这篇文章主要介绍css内容,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1.css和html的结合方式(四种结合方式)
(1)在每个html标记上都有一个属性style,把css和html结合在一起
-


(2)使用html的一个标签实现

2.css的优先级(一般情况)
由上到下,由内到外。优先级由低到高。
后加载的优先级高。
3.选择器:格式
选择器名称{
属性名:属性值;
属性名:属性值;
}
css的基本选择器(三种)
(1)标签选择器
使用标签名作为选择器的名称
div{
background-color:blue;
cloor:red;
}
(2)class选择器
每个html标签都有一个属性class

aaaaaaaaaaaa

div.class|.class{
background-color:orange;
}
(3)id选择器
每个html标签都有一个属性id
aaaaaaaaaaaa

div#hehe|#hehe{
background-color:orange;
}
基本选择器的优先级:
style > id选择器 > class选择器 > 标签选择器

4.css的扩展选择器
(1)关联选择器

wwwwwwwwwwwwwwwwwwwww


设置div标签里面p标签的样式,嵌套标签里面的样式
div p {
background-color:green;
}
(2)组合选择器
11111

222222222


把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
div,p {
background-color:orange;
}
(3)伪元素选择器
css里面提供了一些定义好的样式,可以拿过来使用
比如超链接:
超链接的状态
原始状态 鼠标放上去 点击 点击之后
:link :hover :active :visited

5.css的盒子模型
在进行布局前要把数据封装到一块一块的区域内(div)
(1)边框
border:统一设置
border:2px solid bule;
border-top 上
border-bottom 下
border-left 左
border-right 右
(2)内边距
padding:统一设置
padding:20px;
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右
(3)外边距
margin:统一设置
margin:20px;
margin-top 上
margin-bottom 下
margin-left 左
margin-right 右

6.css布局的漂浮
float:
属性值
left: 文本流向对象的右边
right: 文本流向对象的左边
7.css布局的定位
position:
属性值
absolute:
将对象从文档流中拖出
可以使用top、bottom等属性进行定位
relative:
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位

最后

以上就是调皮西牛为你收集整理的css内容的全部内容,希望文章能够帮你解决css内容所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(63)

评论列表共有 0 条评论

立即
投稿
返回
顶部