CSS基础

最新推荐文章于 2022-11-30 21:37:28 发布

终极秃头怪

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量142

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_44801321/article/details/119710153

版权

1. CSS的四种导入方式

1. 行内样式

在标签元素中直接添加style属性，编写样式即可。

<body>
<h1 style="color: brown">Hello World</h1>
</body>

2. 内部样式

在头部中添加style标签，在style中的块中标签编写样式即可

<style>
        h1{
            color: aquamarine;
        }
    </style>

3. 外部样式

新建一个css文件，通过在头部中添加link标签定位，将ccs文件路径写入link 的href属性中，可以在css文件中编写样式。
html

<link rel="stylesheet" href="demo01/css.css">

ccs

h1{
    color: blue;
}

就近原则

2. 选择器

2.1 三种基本选择器

2.1.1 标签选择器

格式：标签名{}
无法灵活选择。

2.1.2 类选择器

在标签中加入类名，通过类名来进行选择
格式 .类名{}
选择灵活，可复用。

2.1.3 id选择器

在标签中加入id，通过id名进行选择。
格式 #id{}
不可复用，必须保持全局唯一。
优先级：id>class>标签

2.2 层次选择器

2.2.1 后代选择器：在某个元素后面的所有元素。

父类名{
}

2.2.2 子选择器：某元素后面的第一代元素。

父类名>标签{
}

2.2.3 相邻兄弟选择器：该元素后面的第一个同等级元素。

.类名+标签{
}

2.2.4 通用选择器：该元素后面的所有同等级元素。

.类名~标签{
}

2.3 结构伪类选择器

2.3.1 选择某标签的第一个子元素。标签名子标签名first-child：{操作 }

ul li:first-child{
    background: #ff3895;
}

2.3.2 选择某标签的最后一个子元素。父类标签名子标签名last-child：{操作 }

ul li:last-child{
    background: coral;
}

2.3.3 定位父类标签，选择他的某个元素。元素标签名:nth-child(第几个元素){操作}

p:nth-child(2){
    background: darkred;
}

2.3.4 定位父类标签，选择它某个指定标签元素。元素标签名:nth-of-type(第几个元素){操作}

p:nth-of-type(1){
    background: darkblue;
}

2.4 属性选择器

2.4.1 标签[条件]{}

*= 包含
^= 以什么开头
= 全等于
$= 以什么结尾

3. 网页美化

标题一般用span套起来。

3.1 字体样式

font-family 字体
font-size 大小
font-weight 粗细
color 颜色

3.2 文本样式

文本对齐方式：text-align(text-align: center居中对齐)
首行缩进：text-indent:2em.
行高：line-hight(一行文字居中 line-hight=hight)
装饰：text-decoration（text-decoration: none下划线消失）

4. 超链接伪类

鼠标悬浮颜色：标签：hover
鼠标按住未释放：标签：active

5. 背景图像

div{
            width: 1000px;
            height: 800px;
            border: 1px solid #ff3895 ;
            background-image: url("../demo05/1.jpg");
        }
        /*水平平铺*/
        #div1{

            background-repeat: repeat-x;
        }
        /*竖直平铺*/
        #div1{
            background-repeat: repeat-y;
        }
    /*不平铺*/
        #div3{
            background-repeat: no-repeat;
        }

6.display和浮动

6.1 display（方向不可控）

通过display可以让两个块同时在一行。
给需要的块加上display: inline-block;即可。

6.2 浮动（需要解决父级边框塌陷问题）

使用float即可定义左右浮动。

7. overflow和父类边框塌陷问题

7.1 在父级元素的最后面加一个空的div标签，清除浮动。

<div class="clear"> </div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

7.2 将父级元素的高度和宽度增加到可以包裹住子类元素

7.3 在父类元素中添加overflow: hidden

7.4 父类添加一个伪类：after

.father:after{
    /*添加一个空元素*/
    content: '';
    /*把它转化为块*/
    display: block;
    clear:both;
}

8. 定位

8.1 相对定位

position: relative;

 .second{
            background-color: pink;
            position: relative;
            left: -20px;
            bottom: 20px;
        }
        .third{
            background-color: green;
            position: relative;
            right: 20px;/*正数忘反方向移动，负数往正方向移动*/
            top: 20px;
        }

8.2 绝对定位

position: absolute;

没有父级元素定位的情况下，相对于浏览器定位。
假设父级元素存在定位，通常会相对于父级元素进行偏移。

8.3 固定定位

position: fixed
固定不动

8.4 z-index

图层，最低0，最高无限。
opacity:透明度。（0.5）
filter:Alpha(opacity=50).(处理兼容性)

终极秃头怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS的四种导入方式行内样式在标签元素中直接添加style属性，编写样式即可。<body><h1 style="color: brown">Hello World</h1></body>内部样式在头部中添加style标签，在style中的块中标签编写样式即可<style> h1{ color: aquamarine; } </style>外部
复制链接

扫一扫