【CSS】属性及其使用

最新推荐文章于 2021-09-22 15:55:09 发布

啧啧啧~~

最新推荐文章于 2021-09-22 15:55:09 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/weixin_43689100/article/details/84074075

版权

CSS是一种用来装饰HTML的标记集合。CSS样式可内嵌于HTML中，也可独立定义，一个CSS可用于多个html，如果CSS内容改变，与之相连接文件的文本自动更新。下面来介绍CSS的相关样式及其属性。

一、CSS样式

样式的写法：属性：值
CSS样式分类：
1.行内样式：又叫内联样式，直接在标签内添加style样式属性；
如：<div style="width: 300px;height: 200px;border: 1px solid red;"></div>
2.内部样式：把CSS样式写在<style>标签内，<style>标签可放于<head>标签内，也可以放置在<body>标签里面；
3.外部样式：把CSS代码写在一个独立的CSS文件中，然后在 HTML文件中引用，引用外部样式时，在<head>标签内使用link标签导入样式文件。

二、CSS选择器

1.选择器的分类：
（1）标签选择器：以HTML标签作为选择器

<style type="text/css">
        div{
            width:350px;
            height: 200px;
            border: 1px solid green;
        }
        </style>

（2）class类选择器：为HTML标签添加class属性

<style type="text/css">
  .one{
            width: 100px;
            height: 50px;
            border:1px solid grey;
        }
</style>
<body>
<div class="one"></div>
</body>

（3）ID选择器：为HTML标签添加ID属性

 <style type="text/css">
 #one{
            width: 100px;
            height: 100px;
            border: 2px solid yellow;
        }
        </style>
<body>
<div id="one"></div>
</body>

（4）子父选择器

<style>
.two>li{
          属性值
        }
<style>
<body>
<ul class="two">
    <li></li>
</ul>
</body>

（5）属性选择器
标签名[属性]
{
属性值
}
2.CSS优先级顺序
（1）样式优先级：行内样式 > 内部样式 > 外部样式
注：link链入外部样式和style内部样式优先级取决于先后顺序，采用就近原则。
（2）选择器优先级：
同一元素引用不同选择器定义样式：ID选择器 > class选择器 > 标签选择器；
同一元素引用同一选择器定义样式：样式表中后定义的优先级高。
（3）如果要改变某样式的优先级，在其样式后加上[空格]！important；此时其优先级别最高。

三、伪类

1.伪类的四种状态：link（未访问状态） hover（鼠标悬停状态） active（激活状态） visited（已访问状态）
2.最常使用的是hover hover适用于所有元素，不仅是链接；
在CSS定义中，：hover必须位于：link和：visited之后（如果有的话），这样样式才能生效；

四、定位（position属性）

1.绝对定位（absolute）：不占位置，对元素绝对定位后，可以使用top、bottom、left、right及z-index五个属性值来调整元素的位置，其位置根据浏览器进行调整。
2.相对定位（ relative;）：占位置，使用position： relative后，同样可以使用上述的五个属性值，但是相对定位的位置是根据其属性值决定的，即：“left:20” 会向元素的 LEFT 位置添加 20 像素。
3.绝对定位与相对定位结合使用：如果想让绝对定位随相对定位的移动而移动那么就要用相对定位来卡主绝对定位内容的位置。
如：

 .four{
            position: relative;
            margin: 0 auto;
            width: 300px;
            height: 250px;
            background-color: greenyellow;
        }
        .five{
            position: absolute;
            left: 0;
            top: 0;
            width: 250px;
            height: 200px;
            background-color:mediumpurple;

在这里插入图片描述

五、盒子模型

盒子模型：用来放网页中的各个元素，网页设计中的内容，如：文字、图片等元素，都是盒子（div嵌套）
在这里插入图片描述
margin：外边距，也叫外填充，是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding：内边距，也叫内填充，是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
盒子的实际宽度=左右边距（2margin）+左右边框（2border）+左右填充（2*padding）+内容本身宽度（width）

六、display属性

1.display：inline
使块级元素显示为内联元素，此时不能再为其设置宽和高，同时也没有上下外边距，但可以设置左右margin属性。
2.display：block
使行内元素变为块级元素
3.display：inline -block
行内块元素，元素呈现为inline，具有block相应特性。
4.display：none
设置隐藏元素

啧啧啧~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS】属性及其使用

CSS是一种用来装饰HTML的标记集合。CSS样式可内嵌于HTML中，也可独立定义，一个CSS可用于多个html，如果CSS内容改变，与之相连接文件的文本自动更新。下面来介绍CSS的相关样式及其属性。一、CSS样式样式的写法：属性：值CSS样式分类：1.行内样式：又叫内联样式，直接在标签内添加style样式属性；如：&amp;amp;lt;div style=&amp;quot;width: 300px;height: ...
复制链接

扫一扫