CSS的简单使用

2021-04-18 13:30:30 阅读：116 来源： 互联网

如何使用CSS

引入css方式

通过style属性引入css样式（行内样式）

<div style="color:red;">
        这是内容
</div>

通过再head标签定义style标签，再style标签中写css样式

<!-- 方式2：内联样式 方式引入css样式 -->
<style>
    span,div,font{
        color: yellow; 
    }
</style>

通过head中使用link标签引入外部的css文件

<!-- css引入方式3：外联样式 引入css文件-->
<link rel="stylesheet" href="css/css.css">

css.css文件中
div{
    color: green;
}

注意：推荐使用外联
优先级：就近原则行内样式 > 内联样式 & 外联样式 (就近原则)

CSS语法

键值对的形式如：color: red；
键和值之间使用冒号，结束使用分号隔开
键是css预定义好的，不可以随便乱写
注释 /* */

参考网站：

https://www.runoob.com/

https://www.w3school.com.cn/

CSS选择器

ID选择器：根据id的值定位标签
格式：#id值{}
特点：唯一性
class选择器：根据class的值定位标签
格式：.class值{}
特点：可以出现多次，一个标签库可以有多个class
标签选择器：根据标签名定位标签
格式：标签名{}
特点：找到该页面中所有的这个标签
组合选择器：将多个选择器使用逗号分开的方式定位标签
格式：选择器1，选择器2，…{}
全局选择器：定位当前页面中所有的标签
格式：*{}
伪类选择器
格式：选择器：属性名{}
特点：监听标签的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 3. 标签选择器  */
        /* font{
           color: blue; 
        } */
        /* 4. 组合选择器  */
        font,div,.s1{
            color: blue;
        }
        /* 5. 全局选择器 */
        *{
            margin: 0px;
        }

        /* 6. 伪类选择器 */
        /* 6.1 未点击的状态*/
        a:link{
            color: green;
        }
        /* 6.2 点击后的颜色*/
        a:visited{
            color: yellow;
        }

        /* 6.3 鼠标悬停 */
        a:hover{
            color: pink;
        }

        /*6.4 点击不松手 */
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <font>执子之手</font>
    <font>与子偕老</font>
    <div>人生若只如初见</div>
    <div>何事秋风悲画扇</div>
    <span class="s1">无语</span>
    <hr />
    <a href="https://www.baidu.com">点击去百度</a>
</body>
</html>

CSS常见样式修饰

尺寸修饰

尺寸修饰：对块标签起作用
格式：width宽度，height高度
注意：带单位

字体修饰

字体修饰
格式：font-xx
简写：font : font-style
font-variant 字体的变体
font-weight字体的风格
font-size字体的大小
line-height 在盒子中的高度
font-family字体的样式
```
     font: italic small-caps bolder 25px "黑体";简写 
```

文本修饰

.p1{
color: green;
font-size: 25px;
text-indent: 2em; 首行缩进
text-decoration: overline; 指定装饰
text- shadow: red 3px 3px 1px; 字体的阴影
}

背景修饰

.d1{
width: 1800px;
height: 2500px;
background-color: #2312BA; 背景颜色
background-image: url(img/yjq.jpg); 背景图片
background-repeat: no-repeat; 背景的平铺
background-position: right bottom; 背景的位置
background-attachment: fixed; 是否随着内容的滚动而滚动 scorll滚动 fixed 固定
}
.d2{
width: 1800px;
height: 2500px;
/* 简写 */
background: pink url(img/yjq.jpg) no-repeat fixed right top;
}

位置修饰

格式：position 通过 left right top bottom 调整位置

盒子模型

理解：网页设计的一种思维模式，将整个页面看成一个盒子嵌套其他盒子
注意：盒子所占的大小
盒子的宽度 = width + 左右边框的大小 + 左右内边距 + 外边距
盒子的高度 = height + 上下边框的大小 + 上下内边距 + 外边距
内边距：盒子中内容到边框的距离
width：内容的最左侧到最右侧的距离
外边距：盒子与其他元素的距离
边框：border
border-top: 2px solid #c3c3c3: 参数1：边框的宽度参数2：边框的形状参数3：边框的颜色
border-radius边角弧度
内边距 padding 外边距 margin

浮动

格式： float: left|right
特点：不在原先的平面(坍塌) 块标签变成行标签顶部对齐
注意：设置浮动记得清除浮动否则影响后面的布局被覆盖
如何清除：定一个同级标签设置样式为 style=“clear:both”

display

格式：display: block|inline|inline-block|none
作用：

将块标签变成行标签或者行内块标签
实现标签的显示和隐藏 display:none
注意：
块标签：独占一行可以设置宽高
行标签：不独占一行不可以设置宽高
行内块标签：不独占一行可以设置宽高
特点：
实现的水平对齐下对齐

标签：color,标签,简单,css,使用,格式,font,选择器,CSS
来源： https://blog.csdn.net/whymeso_diao/article/details/115824444

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9