CSS知识点复习

最新推荐文章于 2024-06-18 21:25:22 发布

YANGGEOL

最新推荐文章于 2024-06-18 21:25:22 发布

阅读量153

点赞数

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

本文链接：https://blog.csdn.net/qq_46253184/article/details/115422850

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS的基础概念，包括选择器的应用、字体和文本属性的设置、复合选择器、行内与块元素的区别，以及display、定位、背景和盒子模型等关键知识点。通过实例演示了如何精确控制网页样式，适合深入理解CSS的开发者阅读。

摘要由CSDN通过智能技术生成

CSS

介绍

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

使用

选择器

<!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>CSS</title>
    <style>
        /* 选择器 */
        .app {
            /* 类选择器 */
            padding: 0;
        }
        .red {
            background-color: red;
        }
        #appdiv {
            /* id选择器 */
            font-size: 12px;
        }
        div {
            /* 标签选择器 */
            color: blue;
        }
        * {
            /* 通配符选择器 给所有元素使用*/
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="app red" id="appdiv">
        <!-- 可以添加多个类 -->
        <p></p>
    </div>
</body>
</html>

复合选择器

<!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>
        /* 后代选择器 */
        div p {
            width: 20px;
        }
        span p {
            width: 10px;
        }
        /* 子选择器 必须为"亲儿"子标签 */
        div > p {
            background-color: red;
        }
        /* 并集选择器 可以选择多个标签 */
        div, p {
            color: royalblue;
        }
        /* 伪类选择器 用于添加特殊的效果*/
        /* 链接伪类选择器 */
        a:link {
            /* 选择所有违背访问的链接 */
        }
        a:visited {
            /* 选择已被访问的链接 */
        }
        a:hover {
            /* 鼠标位于其上的指针 */
        }
        a:active {
            /* 鼠标按下未弹起的链接 */
        }
        /* focus 选取获得焦点的表单元素*/
        input:focus {
            /* 焦点即光标 */
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <span>
        <p></p>
    </span>
</body>
</html>

字体属性

<style>
        div {
            /* 定义字体 */
            font-family: 'Courier New', Courier, monospace;
            /* 字体大小 */
            font-size: 12px;
            /* 字体粗细 */
            font-weight: bold;
            /* 字体样式 */
            font-style: normal;
            /* 复合属性写法 必须保留font-size font-family*/
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px/20px "Microsoft yahei";
        }
</style>

文本属性

 <style>
        div {
            /* 文本颜色 */
            color: red;
            /* 文本对齐 left 默认 right center*/
            text-align: center;
            /* 文本装饰 天加下划线 上划线 删除线等 none underline overline line-through*/
            text-decoration: red;
            /* 文本缩进 段落的首行缩进*/
            text-indent: 0%;
            /* 行间距 */
            line-height: 10px;
        }
</style>

引入

<!-- 行内 -->
<p style="width: 10px;"></p>
<!-- 外部样式 -->
<link rel="stylesheet" href="./style.css">

行内元素块元素行内块元素

<!-- 块元素 独占一行-->
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
<p></p>
<div></div>
<ul></ul>
<ol></ol>
<li></li>
<!-- 行内元素 一行可以多个 不能直接设置高度宽度-->
<a href=""></a>
<strong></strong>
<b></b>
<em></em>
<i></i>
<del></del>
<s></s>
<ins></ins>
<u></u>
<span></span>
<!-- 行内块元素 -->
<img src="" alt="">
<input type="text">
<td></td>

display属性

元素类型转换 none隐藏元素

背景

<style>
        div {
            /* 背景颜色 一般情况下默认透明 transparent*/
            background-color: red;
            /* 背景图片 none / url() */
            background-image: url();
            /* 背景平铺 默认情况下平铺 repeat no-repeat repeat-x repeat-y */
            background-repeat: repeat;
            /* 背景位置 图片在背景中的位置 精确位置background-position: x y;*/
            background-position: top;
            /* 背景固定 视差滚动 fixed scroll*/
            background-attachment: fixed;
            /* 复合写法 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;*/
            background: black url() no-repeat fixed center top;
        }
</style>

盒子模型

<style>
        div {
            width: 100px;
            height: 100px;
            border-width: 8px;
            border-style: solid;
            border-color: springgreen;
            border: 1px solid black;
            margin: 1px;
            padding: 1px;
            /* 盒子阴影 box-shadow: h-shadow必须 阴影位置 v-shadow必须 阴影位置 blur可选 模糊距离 spread可选 阴影尺寸 color可选 阴影颜色 inset可选 外部阴影改为内部;*/
            box-shadow: 10px 10px 10px 10px black;
            /* 文字阴影 text-shadow: h-shadow v-shadow blur color*/
        }
</style>

浮动

<style>
       div {
            /* 浮动元素具有行内块特性 */
            float: left;
            /* 清除浮动 1.父级添加overflow 2.父级添加after伪元素 3.父级添加双伪元素*/
        }
</style>

定位

static 静态定位 absolute 绝对定位 relative 相对定位 fixed 固定定位 sticky 粘性定位

visibility

visible 元素可见 hidden元素隐藏但继续占有原来的位置

overflow

溢出显示和隐藏

小三角

<!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>
        #box {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: red;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

鼠标样式

cursor:
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

综合

取消表单轮廓
outline: none;
防止拖拽文本域
resize: none;
设置图片或表单内元素和文本内容垂直对齐
vertical-align: baseling 默认 top 顶部 middle 中间 bottom 下端
单行文字溢出省略表示
1.先强制一行内显示文本
2.超出部分隐藏
3.文字用省略号代替超出的部分
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本溢出省略
overflow: hidden;
text-overflow: ellipsis;
1.弹性伸缩盒子模型显示
display: -webkit-box;
2.限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
3.设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

YANGGEOL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点复习

CSS介绍层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。使用选择器<!DOCTYPE html><html lang="en"><
复制链接

扫一扫