CSS

最新推荐文章于 2024-11-01 15:19:31 发布

雨醉东风

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量117

点赞数

分类专栏： WEB 文章标签： html css

本文链接：https://blog.csdn.net/zhangxuelong461/article/details/103688826

版权

WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS

CSS引入方式：三种

内联：在style属性中添加样式代码不能复用

<!-- 内联样式在标签里添加style属性 -->
<h1 style="color: blue">内联样式1</h1>

内部：在head标签里面添加style标签可以当前页面复用

<style type="text/css">
	  h2{
	       color: red;
	   }
</style>

外部：在单独的css文件中写样式代码在html页面中通过link标签引入可以多页面复用

<!-- 引入css文件 -->
<link rel="stylesheet" type="text/css" href="./index.css">

引入方式的优先级：内联最高内部外部一样后执行覆盖先执行的

选择器

标签名选择器
格式：标签名{样式代码}

p{
     color: green;
}

id选择器
格式： #id{样式代码}
当需要选择页面中的某一个标签时使用

#h2_1{
    background-color: purple;
}

类选择器
格式： .class{样式代码}
当需要选择页面中的某一类标签时使用

.className{
    color: yellow;
}

分组选择器
将多个选择器合并成一个(用逗号隔开)
格式： div,.className,#id{样式代码}

div,.className,#id{
	color:red;
}

属性选择器
格式：标签名[属性名=‘值’]{样式代码}

input[type='text']{
   background-color: green;
}

后代选择器
格式： div p{样式代码} 选择div里面的所有p（包括子元素及所有后代）用空格隔开

body div p{
    color: red;
}

子代选择器
格式: div>p{样式代码} 选择div里面的p子元素

body>div>p{
    background-color: blue;
}

伪类选择器
选择的是元素的状态
有哪些状态？
悬停状态点击状态访问过状态未访问状态
格式： a:visited/link/hover/active{样式代码}

/* 访问后 */
a:visited{
    color: red;
}
/* 未访问 */
a:link{
    color: yellow;
}
/* 悬停 */
a:hover{
    color: blue;
}
/* 点击 */
a:active{
    color: green;
}

通用选择器
格式： *{样式代码}

*{
	color:red;
}

颜色的赋值方式

三原色：红绿蓝 rgb 每个颜色取值范围0-255

可用颜色单词 red/green/blue…
6位16进制赋值 #0000ff;
3位16进制赋值 #00f;
3位10进制赋值 rgb(255,0,0);
4位10进制赋值rgba(x,x,x,x) a = alpha透明度取值0-1

h1{
	color: rgba(0,0,255,0.2);
}

背景图片

div{
    width: 300px;
    height: 300px;
    background-color: pink;
    /* 设置背景图片 */
    background-image: url(./images/index.jpg);
    /* 设置背景图片尺寸 */
    background-size: 100px 100px;
    /* 禁止平铺 */
    background-repeat: no-repeat;
    /* 设置背景图片位置 横向百分比和纵向百分比 */
    background-position: 100% 0%;
}

元素显示方式display

block：块级元素的默认值，特点:独占一行，可以修改宽高，包括：h1-h6,p,div
inline：行内元素的默认值，特点：共占一行，不能修改宽高，包括：span，b，i，small
inline-block:行内块，特点：既能修改宽高，也共占一行包括：img

盒子模型

盒子模型=宽高+外边距+边框+内边距
宽高：负责控制元素的显示大小
外边距：负责元素的显示位置
边框：负责边框
内边距：负责控制元素内容的位置

盒子模型之宽高

赋值方式： width、height 两种赋值方式：1. 像素 2. 上级元素百分比
块级元素可以修改宽高，行内元素不能修改宽高

盒子模型之外边距margin

外边距：元素距上级元素或相邻兄弟元素的距离
赋值方式：
margin-left/right/top/bottom:10px;
margin:10px; 四个方向
margin:10px 20px; 上下10 左右20
margin:10px 20px 30px 40px; 上右下左(顺时针)
粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距，会出现显示异常，通过给上级元素添加overflow：hidden解决(给上级元素添加边框也可)
添加边框也能避免粘连问题但是不一定适用，如果有些元素就是没有边框，不能改变原有显示效果

盒子模型之边框

赋值方式:
border: 粗细样式颜色;
border-left/right/top/bottom:粗细样式颜色;
圆角
border-radius: 10px; 值越大越圆当值为宽高一半时为正圆

div{
	 width: 100px;
	 height: 100px;
	 /*
	 solid 实线
	 dotted 点线
	 dashed 虚线
	 double 双线
	  */
	 /*单独设置某一条边的边框 一般起到分割线的作用*/
	 /*border-left: 5px solid #f00;*/
	 border: 1px solid #f00;
	 /* 设置圆角(值越大越圆,当值为宽高一半时正圆) */
	 border-radius: 5px;
}

盒子模型之内边距padding

内边距：元素内容距离元素边缘的距离
赋值方式和外边距一样
padding-left/right/top/bottom:10px;
padding:10px;四个方向
padding:10px 20px; 上下和左右
padding:10px 20px 30px 40px ;上右下左
内边距会影响元素的宽高

div{
	/* 最初width,height都是200的，内边距加了50,相应的宽高就要减50 */
	width: 150px;
	height: 150px;
	border: 1px solid #00f;
	/* 内边距会影响元素的宽高 */
	padding-left: 50px;
	padding-top: 50px;
}

文本相关

水平对齐方式： text-align:left/right/center;
文本修饰： text-decoration: overline/underline/line-through/none;
文本阴影：text-shadow : 颜色 x偏移值 y偏移值浓度
行高： line-height:20px;
字体大小： font-size:30px;
加粗： font-weight:bold/normal;
斜体： font-style:italic;
字体： font-family:xxx,xxx,xxx;

div{
    width: 100px;
    height: 100px;
    border: 1px solid #00f;
    /* 文本水平对齐方式 */
    text-align: center;
    /* 文本修饰(上划线overline，下划线underline，删除线line-through) */
    text-decoration: line-through;
    /* 文本阴影 （颜色 x偏移值px y偏移值px 浓度px-值越小越清晰）*/
    text-shadow:#f00 10px 10px 2px;
    /* 行高 可以实现文本上下居中(将行高设置为元素的高即可) */
    line-height: 100px;
    /* 字体大小 */
    font-size: 20px;
    /* 字体粗细 加粗bold/normal(去掉加粗) */
    font-weight: bold;
    /* 字体风格 italic斜体 normal文本正常显示 oblique文本倾斜显示 */
    font-style: italic;
    /* 字体设置(通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace")
    可设置多个，哪个能用就用哪个 */
    font-family: cursive,serif,sans-serif,fantasy,monospace;

}

CSS的三大特性

继承：元素可以继承上级元素的文本相关样式，元素自身所带效果不受继承影响，比如：超链接a标签的字体颜色，h1-h6自带的字体大小
层叠性：多个选择器有可能选择同一个元素,如果添加的样式不同则全部层叠生效，如果添加的样式相同则由选择器的优先级决定
优先级：指的是选择器的优先级，作用范围越小优先级越高， id>class>标签名>继承（间接选中）

CSS的定位方式：

静态定位（文档流定位）

格式： position:static（默认）;
特点：块级元素从上往下排列行内元素从左向右排列
通过外边距移动元素

相对定位

格式： position:relative
特点：元素不脱离文档流（不管元素移动到哪里原来的位置一直占着占位）
元素通过 left/right/top/bottom 相对于元素的初始位置做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位：相对定位</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #00f;
        }
        div:hover{
            position: relative;
            top:30px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="d1">div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

绝对定位

格式： position：absolute
特点：元素脱离文档流
元素通过left/right/top/bottom相对于窗口或某一个上级元素（需要在上级元素中添加相对定位做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位：绝对定位</title>
    <style type="text/css">
        /*
         相对于窗口做偏移)
         */
        div{
            width: 100px;
            height: 100px;
        }
        #div1{
            background-color: #f00;
        }
        #div2{
            background-color: #0f0;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0px;
        }
        #div3{
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>
</html>

固定定位

格式： position： fixed;
特点：元素脱离文档流
元素通过left/right/top/bottom相对于窗口做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位：固定定位</title>
    <!-- 固定定位：position:fixed
        元素脱离文档流。
        相对于窗口做位置偏移
     -->
     <style type="text/css">
        div{
            width: 100%;
            height: 100px;
            background-color: #f00;
            /* 固定定位 */
            position: fixed;
        }
        #d2{
            width: 50px;
            height: 200px;
            background-color: #00f;
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
     </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <img src="../imgs/a.jpg">
    <img src="../imgs/b.jpg">
    <img src="../imgs/c.jpg">
</body>
</html>

浮动定位

格式： float:left/right;
特点：脱离文档流，元素从所在行向左或向右浮动，当撞到上级元素边框或其他浮动元素时停止。
如果一行装不下会自动换行，换行时有可能被卡住
如果元素的所有子元素全部浮动，则自动识别的高度为0，给元素添加overflow：hidden。
应用场景：当需要将纵向排列的元素改成横向排列时使用浮动定位
通过外边距移动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
     <style type="text/css">
         body>div{
            width: 200px;
            border: 1px solid #f00;
            /* 解决高度识别为0的问题 */
            overflow: hidden;
         }
         #d1{
            width: 50px;
            height: 50px;
            background-color: #f00;
            float: left;
         }
         #d2{
            width: 50px;
            height: 50px;
            background-color: #0f0;
            float: left;
         }
         #d3{
            width: 50px;
            height: 50px;
            background-color: #00f;
            float: left;
         }
     </style>
</head>
<body>
    <div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>
</html>