CSS的简单使用

最新推荐文章于 2024-07-21 19:13:42 发布

别悲^_^

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量150

点赞数

文章标签： css

本文链接：https://blog.csdn.net/whymeso_diao/article/details/115824444

版权

如何使用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
注意：
块标签：独占一行可以设置宽高
行标签：不独占一行不可以设置宽高
行内块标签：不独占一行可以设置宽高
特点：
实现的水平对齐下对齐

别悲^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的简单使用

如何使用CSS引入css方式通过style属性引入css样式（行内样式）<div style="color:red;"> 这是内容</div>通过再head标签定义style标签，再style标签中写css样式<style> span,div,font{ color: yellow; }</style>通过head
复制链接

扫一扫