【CSS基础】

最新推荐文章于 2024-08-30 15:33:13 发布

伍六七.167

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量29

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_65700815/article/details/132067754

版权

文章目录

css
CSS选择器

css

概念：层叠样式表

css基本语法：

写法一：
style 内联样式表
写法二：
内部样式表
写法三：
外部样式表
在head里面写在里面写
新建文件css写，在head里面用引用进来

层叠冲突继承

css层叠：
同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠
css冲突：
同一元素设置相同的属性会发生冲突，遵循就近原则选择属性值。
css继承：
在子父关系中，文本样式可以被继承，布局样式不可以被继承（块级元素继承父的宽，行级不可以）

css基本样式：

文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排序
块级标签：独占一行

基本样式：

宽： width：100px；
高：height：100px；
背景颜色：backgound-color：颜色；
背景图片：background-image
注意：行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应。
块级标签可以设置宽高，背景颜色。

css中颜色表示：

单词表示：red，green，blue…
十六进制表示：取值范围（0~9 && a~f）
RGB三原色表示：取值范围（0~255）

CSS选择器

全局选择器（通配符选择器）

<style>{
padding:0；
margin: 0;}
</style>

标签选择器

<style>
p{
font-size:16px;
}
b{
color: coral;
}
    </style>
</head>
<body>
<p>我是HTML中的段落标签</p>
<b>我是HTML中的加粗标签</b>
</body>

class类选择器

<style>
       .classNamef{
                color: coral;
                }
class选择器用书写格式:   .类名
</style>
</head>
<body>
<b>class="className">加粗标签</b>
</body>

id选择器

id名字独一无二
#ss{
background-color: blanchedalmond;
}

群组选择器

div，p{
color: aqua;
}

层次选择器

后代选择器用空格表示
子代选择器用>表示
相邻兄弟用+表示下面相邻的代码
通用兄弟用~0表示同级
在这里插入图片描述

伪类选择器

状态伪类 a 四个顺序不能变
link 默认情况下的状态
visited 访问过后的状态
hover 鼠标悬浮时的状态
active鼠标点击时的状态
结构伪类：
ul li：Nth-child（5）{属性}
nth-child() 元素的第 n 个相同元素

伍六七.167

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【CSS基础】

在子父关系中，文本样式可以被继承，布局样式不可以被继承（块级元素继承父的宽，行级不可以）同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠。同一元素设置相同的属性会发生冲突，遵循就近原则选择属性值。背景颜色：backgound-color：颜色；nth-child() 元素的第 n 个相同元素。十六进制表示：取值范围（0~9 && a~f）单词表示：red，green，blue…RGB三原色表示：取值范围（0~255）宽： width：100px；高：height：100px；
复制链接

扫一扫