重学前端之CSS

最新推荐文章于 2024-09-19 17:56:22 发布

向初晨

最新推荐文章于 2024-09-19 17:56:22 发布

阅读量763

点赞数

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/zhuyue_shenfeng/article/details/122578783

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

Cascading Style Sheets（层叠样式表）

一、导入方式
优先级：就近原则（谁离标签近谁生效）
1、行内样式

	<!-- 行内样式 -->
    <h1 style="color: #0f2;">标题1</h1>

2、内部样式

	<style>
        /* 内部样式 */
        h1{
            color: #f80;
        }
    </style>

3、外部样式
3.1 链接式
<link rel="stylesheet" href="demo01.css">

/* 外部样式 */
h1{
    color: #f20;
}

3.2 导入式

	<style>
       @import url("css/demo01.css");
    </style>

二、选择器
2.1 基本选择器
不遵循就近原则，id > class > 标签
1.标签选择器
选择页面内全部的同一个标签

h1{
    color: #f20;
}

2.类选择器
标签里面加class,css文件中以 .class 的形式做出选择

<h1 class="xixi">标题二</h1>

.lx{
    color: #00f;
}

3.id选择器
id选择器，必须保证 id 全局唯一

<h1 id="hehe">标题二</h1>

.lx{
    color: #00f;
}

2.2 层次选择器
eg（结果自己跑一下）：

<body>
    <p>p1</p>
    <p class="haha">p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p class="haha">p7</p>
    <p>p8</p>
    <p>p3</p>
</body>

1.后代选择器
在某个元素的后面，空格隔开，选择全部

body p{
    background-color: #f60;
}

2.子选择器
在某个元素下的某些元素，用 >

body>p{
    background-color: #f60;
}

3.相邻兄弟选择器
某个带class的标签向下相邻的第一个兄弟元素，用 +

.haha+p{
    background-color: #f60;
}

4.通用兄弟选择器
某个带class的标签向下相邻的所有兄弟元素，用 ~

.haha~p{
    background-color: #f60;
}

2.3 结构伪类选择器
伪类 : 条件
eg（结果自己跑一下）：

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

1.基础

/* 选择ul第一个选择子元素 */
ul li:first-child{
    background-color: #f60;
}

/* 选择ul最后一个子元素 */
ul li:last-child{
    background-color: #2f7;
}

2.复杂

/* 
    选择第一个p标签，定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
    background-color: #09f;
}

/* 
    选择当前p元素的父级元素，选中父级元素的第二个，无需是当前元素亦可生效
*/
p:nth-of-type(2){
    background-color: #a6f;
}

2.4 属性选择器

/* 存在id的元素 */
a[id]{
    background-color: #f60;
}

/* id为first的元素 */
a[id=first]{
    background-color: #f60;
}

/* class中有try的 */
a[class*=try]{
    background-color: #f60;
}

/* href中以http开头的 */
a[href^=http]{
    background-color: #f60;
}

/* href中以pdf结尾的 */
a[href$=pdf]{
    background-color: #f60;
}

三、基础样式及作用
<div>块级标签，约定俗成
<span>行内标签
字体：

	/* 字体类型 */
    font-family: 楷体;
    /* 字体大小 */
    font-size: 50px;
    /* 字体粗细 */
    font-weight: bold;
    /* 字体颜色 */
    color: red

颜色：

    color: red;                 /* 直接单词 */
    color: #ff00ff;             /* rgb函数  十六进制 */
    color: rgb(0,255,255);      /* rgb函数  0~255 */
    color: rgba(255, 0, 255, 0.5);  /* a透明度  0~1 */

段落：

	text-align: center;  /* 排版，居中 */
    text-indent: 2em;     /* 首行缩进两个字 */
    height: 300px;       /* 行高和块的高度一致可实现单行文字上下居中 */
    line-height: 300px;   /* 行高 */
    text-decoration: underline; /* 下划线 */
    text-decoration: line-through; /* 中划线 */
    text-decoration: overline; /* 上划线 */
    text-decoration: none; /* 链接去除下划线 */
    text-shadow: 5px 5px 5px #f60; /* 水平偏移、垂直偏移、阴影半径、阴影颜色 */

a标签的伪类：

a:link {color:#f60;} /* 未访问的链接 */
a:visited {color:#f06;} /* 已访问的链接 */
a:hover {color:#60f;} /* 鼠标划过链接 */
a:active {color:#6f0;} /* 已选中的链接 */

列表：

list-style: none;   /* 无圆点和数字 */

背景：

div{
    width: 1080px;
    height: 800px;
    border: 1px solid red;
    background-image: url("images/photo1.jpg");     /*默认是全部平铺*/
    background-repeat: repeat-x;    /*水平*/
    background-repeat: repeat-y;    /*垂直*/
    background-repeat: no-repeat;   /*不平铺*/
    /*  颜色，图片，图片位置，平铺方式*/
    background: red url("images/photo1.jpg") 270px 10px no-repeat;
}

渐变：
使用网站：https://www.grabient.com/

四、盒模型
在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

	border: 1px solid red; /* 粗细，样式，颜色 */
    padding: 10px 10px 10px 10px; /* 上 右 下 左 */
    margin: 0 auto; /* 居中 上下为0，左右自适应 */
    border-radius: 50px 20px;  /* 做上 右上 右下 左下 */

五、display与浮动

	display: inline;  /* 行内元素 */
    display: block;   /* 块元素 */
    display: inline-block;   /* 行内块元素，块元素但可以在一行 */

浮动：

	float: left;
    float: right;

清除浮动：

	clear: left;    /* 左侧不允许有浮动 */
    clear: right;   /* 右侧不允许有浮动 */
    clear: both;    /* 两侧不允许有浮动 */
    clear: none;

解决父级塌陷的问题：
1.加一个空的div，去除浮动

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

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

2.父级加overflow: hidden;

    overflow: hidden;    /* 内容会被修剪，并且其余内容是不可见的。 */
    overflow: scroll;    /* 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 */  
    overflow: auto;      /* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
    overflow: inherit;   /* 规定应该从父元素继承 overflow 属性的值。 */

3.父级增加伪类（常用）

#father::after{
    content: '';
    display: block;
    clear: both;
}

六、定位

6.1 相对定位
相对原来的位置进行上下左右的偏移
position: relative;

    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>

#first{
    background-color: #f60;
    border: 1px dashed green;
    position: relative;   /*相对定位*/
    top: -20px;
    right: 20px;
}

6.2 绝对定位
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
1.没有父元素定位的前提下相对于浏览器定位
2.假设父级元素存在定位，则相对于父级进行定位
3.在父级范围内移动
4.绝对定位后好像变成了行级块元素 display: inline-block;

#father{
    border: 1px solid red;
    position: relative;
}

#second{
    background-color: #60f;
    border: 1px dashed blue;
    position: absolute;
    right: 0;
    bottom: 0;
}

6.3 固定定位
用于侧边栏和导航栏、返回顶部之类

#third{
    width: 100px;
    height: 100px;
    position: fixed;
    background-color: #0f6;
    border: 1px dashed yellow;
}

6.4 z-index
指定一个元素的堆叠顺序

    <div id="content">
        <ul>
            <li><img src="wgj.jpg" alt=""></li>
            <li class="tipText">study</li>
            <li class="tipWGJ"></li>
            <li>时间：2022.1.31</li>
            <li>地点：hj</li>
        </ul>
    </div>

body{
    padding: 30px;
}

div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}

#content{
    display: inline-block;
    border: 1px solid red;
    font-size: 12px;
    line-height: 25px;
    overflow: hidden;
}

img{
    height: 150px;
    width: 300px;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}

#content ul{
    position: relative;
}

.tipText,.tipWGJ{
    position: absolute;
    width: 300px;
    height: 25px;
    top: 126px;
}

.tipText{
    color: #fff;
    z-index: 999;
}

.tipWGJ{
    background: #000;
    opacity: 0.5; /*透明 0.5*/
}