CSS

最新推荐文章于 2022-07-18 16:45:26 发布
最新推荐文章于 2022-07-18 16:45:26 发布
阅读量331 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/99176958
版权

《HTML的表单与CSS样式-笔记》

CSS介绍

目标

学习CSS概念和作用

HTML: 用于网页的结构(毛坯房)
[外链图片转存失败(img-RPiHOssX-1565495211878)(/)]

概念和作用

CSS: Cascading Style Sheet ? 层叠样式表，对网页进行美化的

CSS: 用于网页的美化(装修)
[外链图片转存失败(img-3af1elzs-1565495211880)(/)]

案例：CSS的作用

将一个表格中所有的单元格居中，如果使用以前的方式，每个td或tr都要设置align属性为center，而使用css则方便得多。

效果

[外链图片转存失败(img-HQhgoyU7-1565495211880)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <!--type="text/css"表示是一个CSS样式的代码-->
    <style type="text/css">
        /*现在可以一次选择所有td,设置相应的属性*/
        td {
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>
    <table border="1" width="400">
        <tr>
            <!--以前的做法,每个td都要设置成align=center,内容要添加font-->
            <td align="center"><font color="blue">111</font></td>
            <td align="center"><font color="blue">111</font></td>
            <td align="center"><font color="blue">111</font></td>
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>
</body>
</html>

小结

CSS的好处描述
功能上设置网页的效果比HTML更强大
耦合性HTML和CSS代码是分离的，耦合性低

CSS的规则和3种位置

目标

  1. 学习CSS的规则
  2. 学习CSS出现的三种位置
CSS规则

[外链图片转存失败(img-LFPJW5Dy-1565495211881)(/)]

[外链图片转存失败(img-PxdkVTvf-1565495211881)(/)]

规范说明
大括号所有的样式写在大括号中
样式名左边是样式的名字，使用小写。如果有多个单词，使用-分隔
样式值每个样式值都有固定的取值
样式结尾每条样式以分号结尾
注释与Java的多行注释一样 /* */
CSS的位置
行内样式

[外链图片转存失败(img-lEYNDlAX-1565495211882)(/)]

  • 位置：样式是出现在标签开始位置，以style属性存在。
  • 特点：只有这个标签有效(实际开发基本不同)
内部样式

[外链图片转存失败(img-LWAeFaFr-1565495211883)(/)]

  • 位置：写在HTML文件内部，放在style标签中。
  • 特点：在本HTML文件种的多个标签起作用
外部样式

[外链图片转存失败(img-IaNGEaKf-1565495211883)(/)]

  • 位置：以CSS文件的方式存在HTML的外部。
  • 特点：可以给多个HTML使用
提问：以后三种样式哪种会用得比较多？

以后使用外部样式较多，但我上课为了看得更方便，使用内部样式。

三种样式的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的位置</title>

    <!--内部样式:在html中使用style标签-->
    <style type="text/css">
        h2 {
            background-color: red;
        }
    </style>

    <!--外部样式
    rel: 表示html文件和css文件之间的关系,必须指定
    href: 指定外部css文件的位置
    type: 指定文件的类型-->
    <link rel="stylesheet" href="css/01_css.css" type="text/css"/>

</head>
<body>
    <!--行内样式:直接在标签上添加样式-->
    <h1 style="background-color: blue">我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
</body>
</html>

css/01_css.css:

h3 {
    background-color: deeppink;
}

小结

  1. 行内样式有什么特点？

    只有本标签可以使用

  2. 内部样式有什么特点？

    本HTML文件可以使用

  3. 外部样式有什么特点？

    多个HTML文件可以使用

  4. 三种位置的样式出现同名的样式会怎么样？

    行内样式 > 内部样式和外部样式，谁在下面就用谁

CSS基本选择器(重点)

目标

学习CSS的四种基本选择器

[外链图片转存失败(img-f5C9HYc3-1565495211884)(/)]

CSS选择器作用

选中要设置样式的标签

语法格式
<h1>我们是害虫h1</h1>
<h1>我们是害虫h2</h1>
<h4 class="c4" id="i4">我们是害虫h4</h4>

[外链图片转存失败(img-rn2MyEcT-1565495211885)(/)]

选择器之间优先级
通用选择器 < 标签选择器 < 类选择器 < ID选择器
案例

通过代码演示上面CSS的各种基本选择器的使用

效果

[外链图片转存失败(img-CYI7Ju2Y-1565495211886)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style type="text/css">
        /*标签选择器:选中所有的h1标签*/
        h1 {
            color: red;
            background-color: blue;
        }

        /*类选择器:选择所有class属性为aa的标签*/
        .aa {
            color: orange;
            background-color: yellow;
        }

        /*ID选择器:选中所有id为one的标签*/
        #one {
            color: aqua;
            background-color: gray;
        }

        /*通用选择器:选择所有的标签*/
        * {
            color: black;
            font-size: 20px;
        }
        h6 {
            color: magenta;
        }
        .cc {
            color: gray;
        }
        #three {
            color: red;
        }
        /*选择器的优先级: 通用选择器 < 标签选择器 < 类选择器 < id选择器*/
    </style>
</head>
<body>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h2 class="aa">我是h2</h2>
<h2 class="aa">我是h2</h2>
<h3 class="aa">我是h3</h3>
<h3 class="aa">我是h3</h3>
<h4 class="bb">我是h4</h4>
<h5 id="two">我是h5</h5>
<h6 class="cc" id="three">我是h6</h6>
</body>
</html>

小结

选择器名格式作用
通用*选中所有的标签
标签标签名选中指定名称的标签
类.类名选中指定类名的标签
ID#id选中指定id的标签

选择器的优先级

通用选择器 < 标签选择器 < 类选择器 < ID选择器

扩展选择器的使用

目标

四种扩展选择器的使用

什么是扩展选择器

在基本选择器的基础上，进行组合实现更加复杂选择

常用的扩展选择器

[外链图片转存失败(img-jZsAsnbk-1565495211886)(/)]

扩展选择器案例

[外链图片转存失败(img-9n6UK4Cz-1565495211886)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style type="text/css">
        /*
        层级选择器
        符号: 空格
        作用: 选中父标签的下子孙标签
        */
        ol li {
            color: red;
        }
        /*
        属性选择器
        符号: []
        标签名[属性名] 作用: 选择标签名中含有属性名的标签
        标签名[属性名=值] 作用: 选择标签名中含有属性名=值的标签
         */
        input[type="text"] {
            background-color: blue;
        }

        /*
        伪类选择器
        符号: :
        作用: 设置标签在某种状态下的样式
         */
        /*正常状态*/
        a:link {
            text-decoration: none;
        }
        /*访问过的*/
        a:visited {
            color: green;
        }

        /*正在激活*/
        a:active {
            color: yellow;
        }
        /*鼠标悬浮*/
        a:hover {
            color: aqua;
        }

        /*得到焦点*/
        input:focus {
            background-color: pink;
        }

        /*并集选择器
        符号: ,
        作用: 同时选中多个标签*/
        p,span {
            color: gold;
        }
    </style>
</head>
<body>
<ol>
    <li>红烧肉</li>
    <li>东坡肉</li>
</ol>
<div>
    <ul>
        <li>水煮鱼</li>
        <li>酸菜鱼</li>
    </ul>
</div>

用户名:<input type="text"><br/>
密码:<input type="password"><br/>
qq:<input ><br/>
<hr/>
<a href="#1">这是链接1</a><br/>
<a href="#2">这是链接2</a><br/>
<a href="#3">这是链接3</a><br/>
<a href="#4">这是链接4</a><br/>

<p>
    ddddd
</p>

<span>ssssss</span>
</body>
</html>

小结

扩展选择器选择器符号作用
层级父选择器 空格 子选择器选中父选择器选中的子孙元素
属性标签名[属性]选中带有指定属性名的标签
伪类标签名:状态选中指定标签的指定状态
并集选择器1, 选择器2多个选择器同时有效

CSS背景样式

目标

学习CSS背景样式的设置

每个标签都可以设置背景,我们学习的时候以标签为例

[外链图片转存失败(img-l1SeioM7-1565495211887)(/)]

效果

[外链图片转存失败(img-3g33EMuy-1565495211887)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta>charset="UTF-8">
    <title>背景样式</title>
    <style type="text/css">
        body {
        /*    !*背景色*!
            background-color: pink;
            !*背景图片*!
            background-image: url("img/girl1.jpg");
            !*平铺的方式*!
            background-repeat: repeat;
            !*平铺起始位置*!
            background-position: 50px 50px;*/

            /*背景色  alt+enter */
            /*背景图片*/
            /*平铺的方式*/
            /*平铺起始位置*/
            background: pink url("img/girl1.jpg") repeat 50px 50px;

            /*修改背景图片大小*/
            background-size: 100px 100px;
        }
    </style>
</head>
<body>
<h1>我是骑单车的女生</h1>
</body>
</html>

小结

属性名属性取值
background-color背景颜色
background-image背景图片
background-repeat背景图片的平铺方式
background-position背景图片的位置
background-size背景图片的大小

CSS常用文本样式和字体样式

目标

  1. CSS中常用文本样式和字体样式的设置

  2. 制作案例：诗歌

    [外链图片转存失败(img-8vpItNYq-1565495211888)(/)]

文本样式

[外链图片转存失败(img-UrnKxySr-1565495211888)(/)]

字体样式

字体样式会改变文字的形状

[外链图片转存失败(img-GRUvXATj-1565495211889)(/)]

案例：诗歌

[外链图片转存失败(img-dsrCMaRk-1565495211889)(/)]

步骤
  1. 诗放在div的层中，宽400px，全文字体大小14px;
  2. 标题放在h1中。每段文字放在p中
  3. 标题文字大小18px，颜色#06F，居中对齐
  4. 每段文字缩进2em
  5. 段中的行高是22px
  6. “胸怀中满溢着幸福，只因你就在我眼前”,加粗，倾斜，蓝色
  7. 最后一段，颜色#390; 下划线，鼠标移上去指针变化。
  8. 美字加粗，颜色color:#F36，大小18px;
  9. 文席慕容，三个字，12px，颜色#999，不加粗
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇</title>

    <style>
        div {
            /*诗放在div的层中，宽400px，全文字体大小14px*/
            width: 400px;
            font-size: 14px;
        }

        h1 {
            /*标题文字大小18px，颜色#06F，居中对齐*/
            font-size: 18px;
            color: #06f;
            text-align: center;
        }

        p {
            /*每段文字缩进2em*/
            text-indent: 2em;
            /*段中的行高是22px*/
            line-height: 22px;
        }

        /*"胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/
        #xiong {
            font-weight: bolder;
            font-style: italic;
            color: blue;
        }

        /*最后一段，颜色#390; 下划线，鼠标移上去指针变化。*/
        p:last-child {
            color: #390;
            text-decoration: underline;
            cursor: pointer;
        }

        /*美字加粗，颜色color:#F36，大小18px;*/
        .mei {
            color: #f36;
            font-size: 18px;
        }

        /*文席慕容，三个字，12px，颜色#999，不加粗*/
        h1 span {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
    </style>
</head>
<body>
<div>
    <h1>初相遇 <span>文/席慕容</span></h1>
    <p>
        <span class="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。
    </p>
    <p>
        我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。
        <span id="xiong">胸怀中满溢着幸福，只因你就在我眼前，</span>对我微笑，一如当年。
    </p>
    <p>
        我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。
    </p>
</div>
</body>
</html>

小结

属性名作用
color设置颜色
line-height设置行高
text-decorations设置文本的修饰，下划线
text-indents首行缩进
text-alignd对齐方式
属性名作用
font-family设置字体
font-sizes设置字体大小
font-styleitalic:文字倾斜
font-weightbolder：文字加粗

CSS边框样式设置

目标

学习元素的边框样式设置

所有的元素都可以设置边框，我们这里以div为例

边框的样式

[外链图片转存失败(img-WyUo3hmd-1565495211889)(/)]

案例：边框的使用

[外链图片转存失败(img-K8abdvd7-1565495211890)(/)]

步骤
  1. 宽和高分别是200px，边框使用double线形，红色，10px粗细
  2. 对div整个居中
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS边框样式</title>

    <style>
        /*1.宽和高分别是200px，边框使用double线形，红色，10px粗细*/
        /*2.对div整个居中*/
        div {
            width: 200px;
            height: 200px;
            /*边框的线形*/
            /*border-style: double;
            border-width: 10px;
            border-color: gray;*/
            border-radius: 20px;

            /*边框的线形,颜色,宽度可以合起来写*/
            border: solid lightcoral 20px;

            /*块级元素居中:margin: auto;*/
            margin: auto;
        }
    </style>
</head>
<body>
<div>
    我是div....
</div>
</body>
</html>
关于块级元素居中

[外链图片转存失败(img-5hYX0I90-1565495211891)(/)]

小结

属性边框样式
border-style边框的样式
border-width边框的宽度
border-color边框的颜色
border-radius边框的圆角

两种盒子模型

目标

学习两种盒子模型的区别

概述

​ 任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)， 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

  • 内容（content）就是盒子里装的东西
  • 内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
  • 边框(border)就是盒子本身了；
  • 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

[外链图片转存失败(img-SFAeXYzj-1565495211891)(/boxs.png)]

盒子模型的属性

网页中的每一个元素都是一个盒子

[外链图片转存失败(img-HGxE1Zyf-1565495211891)(/)]

如何计算盒子的尺寸

盒子模型分为两种，分别是：标准盒模型(content-box) 和 怪异盒模型(border-box)。绝大多数元素的尺寸默认是按照标准盒模型计算的。下面是元素的尺寸分别在两种盒模型下计算规则：

[外链图片转存失败(img-kVIZhJfK-1565495211892)(/)]

标准盒子模型

[外链图片转存失败(img-NqryzbfE-1565495211893)(/)]

标准盒子计算方式

内容不变，盒子被撑大

实际宽度 = 设置宽度 + 左右内边距 + 左右边框
实际高度 = 设置高度 + 上下内边距 + 上下边框
怪异盒子模型

[外链图片转存失败(img-RdguIgCg-1565495211893)(/1551774834485.png)]

怪异盒子计算方式

盒子不变，内容被缩小

实际宽度 = 设置宽度
实际高度 = 设置高度
案例：盒子模型

[外链图片转存失败(img-PtAj21Qa-1565495211894)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>
        /*标准盒子: 内容不变,宽高被撑大*/
        .one {
            box-sizing: content-box; /*默认就是标准盒子*/
            border: 15px solid gray; /*边框的样式:粗细 线型 颜色*/
            width: 200px;
            height: 200px;
            padding: 10px;
        }

        /*怪异盒子: 宽高就是指定大小,内容会被缩小*/
        .two {
            box-sizing: border-box;
            border: 15px solid gray;
            width: 200px;
            height: 200px;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="one">
    标准盒子
</div>

<div class="two">
    怪异盒子
</div>
</body>
</html>

小结

属性作用
width设置宽度
height设置高度
padding设置内边距
border设置边框
盒子模型的样式名样式值
box-sizing标准盒子模型：content-box
box-sizing怪异盒子模型：border-box

用户的注册案例

目标

使用CSS样式排版出如图所示的效果

[外链图片转存失败(img-WBUdYQHx-1565495211894)(/)]

步骤
  1. 使用一个四行两列的表格布局，表格居中，宽300px，高180px， 边框1px solid gray
  2. table添加背景，不平铺，图片背景的宽度和高度与table的宽和高一样
  3. 第一行和第四行跨2列，第一行是标题th，第四行是放按钮。使用图片按钮
  4. td的文字居中对齐，字体大小14px
  5. 用户名和密码文本框使用类样式，也可以使用其它选择器。宽150px，高32px，边框用实线，圆角5px，1个宽度，黑色
  6. 使用伪类样式，当鼠标移动到文本框上的时候，变成虚线橙色边框。得到焦点，背景色变成浅黄色
  7. 文本框前面有头像，密码框前面有键盘
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        /*宽300px，高180px; 边框solid 1px gray*/
        table {
            width: 300px;
            height: 180px;
            border: solid 1px gray;
            /*表格居中*/
            margin: auto;
            /*背景图片*/
            background-image: url("img/bg1.jpg");
            background-size: 300px 180px;
            /*圆角*/
            border-radius: 10px;
        }

        td {
            text-align: center;
        }

        /*同时选中2个*/
        #user,#pwd {
            border: 1px solid black;
            /*宽150px，高32px*/
            width: 150px;
            height: 32px;
            border-radius: 5px;
        }

        #user {
            background-image: url("img/head.png");
            /*不平铺*/
            background-repeat: no-repeat;
            /*左内边距*/
            padding-left: 35px;
        }

        #pwd {
            background-image: url("img/keyboard.png");
            /*不平铺*/
            background-repeat: no-repeat;
            /*左内边距*/
            padding-left: 35px;
        }

        /*伪类样式，当鼠标移动到文本框上的时候，变成虚线橙色边框。得到焦点，背景色变成浅黄色*/
        #user:hover,#pwd:hover {
            border: orange dashed 1px;
        }

        #user:focus,#pwd:focus {
            background-color: yellow;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th colspan="2">黑马旅游注册</th>
    </tr>
    <tr>
        <td>用户名:</td>
        <td>
            <input type="text" name="user" id="user">
        </td>
    </tr>
    <tr>
        <td>密码:</td>
        <td>
            <input type="password" name="pwd" id="pwd">
        </td>
    </tr>
    <tr>														
        <td colspan="2">
            <input type="image" src="img/regbtn.jpg">
        </td>
    </tr>
</table>
</body>
</html>

小结

一个form表单，里面嵌套一个四行两列的table，使用了背景样式，边框样式，文字样式

罪恶的拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
请问如何让 TD获取焦点
qweyin6的专栏
06-18 1987
请教各位一下    我在页面加载时给表格的所有TD都加载了  键盘事件现在我想通过点击按钮  自动跳转到其中一个TD   然后用键盘操作 请问这个如何事件啊    我用focus()  获取焦点的方法 好像不行
HTML功能元素——列表、表格、表单
叶子yes的博客
07-18 656
表格标签： 1、表格边框 表格标签有一个border边框属性, 这个属性决定了边框的宽度。默认情况下这个属性的值是0, 所以看不到边框。 我们可以在 table 里面设置 border=“1” ，就可以看到边框了（这里不用写单位） 2、宽度和高度（默认是按照内容的尺寸来调整的） 可以给table标签和td标签使用 给table设置：设置的是整个表格的宽高；给td设置：设置的是当前单元格的宽高 3、水平对齐和垂直对齐属性 水平对齐 可以给 table 标签和 tr 标签和 td 标签使用 垂直对齐 只能给 t
CSS页面渲染小白程序员入门案例
qq_41125149的博客
07-13 542
文章目录1.1. CSS介绍2. CSS的引入方式：2.1在标签内部引入，行内样式2.3引入外部的CSS样式，外部样式3.常用的CSS属性：3。1. 案例练习：4. 常见的背景框和样式5. CSS高级5.1行内和行级标签之间的转换5.2盒子模型的案例练习： 1.1. CSS介绍 对静态页面进行渲染，美化页面 取代了html的部分标签 产生原因：为渲染效果 2. CSS的引入方式： 2.1在标签内部引入，行内样式 在标签内部直接加入样式 举例： <标签名 style=”对应的渲染效果”>主题&lt
css知识点梳理
qq_41106925的博客
08-10 356
CSS CSS三种规则和三种位置 规范 说明 大括号 所有的样式写在大括号中 样式名 左边是样式的名字，使用小写。如果有多个单词，使用-分隔 样式值 每个样式值都有固定的取值 样式结尾 每条样式以分号结尾 注释 与Java的多行注释一样 /* */ 样式： 1.行内样式： 位置：样式是出现在标签开始位置，以style属性存在。 特点：只有这个标签有效...
day02 CSS
weixin_43525993的博客
08-22 230
1 css的快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种样式出现的位置</title> <!--需求1: 修改id="p001的样式为红色--> <!--需求2: 修改 当前页面所有div的颜色为 绿色--> <!--需求3: 修改 整个项目所有span的颜色
bootstrap.min.css
02-23
用于渲染前端静态页面
bootstrap.css
01-27
bootstrap的css文件
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
LessCSS
07-22
资源名称：Less CSS内容简介：像写程序一样写 CSSLess CSS 是一个 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数...
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
element.css文件
最新发布
02-27
element.css文件
element-ui css
03-01
element-ui css
postcss-normalize:使用浏览器列表中所需的normalize.css（或sanitize.css）部分
04-12
PostCSS规范化 允许您使用所需的或部分。 @import "normalize.css" ; @import "sanitize.css" ; PostCSS正常化使用的非固执己见版本 ，但也可以使用一个自以为是版本。 @import "normalize.css/opinionated.css" ;...
table css控制边框
weixin_33809981的博客
04-15 2480
Table之CSS控制Table内外边框,颜色,大小 其实按照常理来说，现在的网站应该早已经抛弃什么表格了，现在肯定是DIV+CSS当道嘛！不过客户的网站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。 在默认的情况下，我们的CSS将Table的边框清除掉了，是没有的，看到的效果是这样的。 无边框Table 为了给，表格加一个边框，我在...
css的三种样式（内部样式，外部样式，行内样式）
ZHY211985的博客
04-24 492
css样式三种书写格式 NO-1行内样式（个人不太推荐使用） 例<div style="css样式"></div> NO-2内部样式（只能在一个网页使用，也是使用比较多的方式） NO-3外部样式（可以多个HTML引用，个人觉得比较好用，当然还要看代码量和个人习惯） 但是需要建立一个css文件 CSS代码 html代码 在网页显示 ...
CSS的文本属性：文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等
qq_44156869的博客
09-13 900
CSS文本属性 CSS Text （文本） 属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等。 文本的颜色 color 属性定义文本的颜色。 <head> <style> div { color: pink; } </style> </head> <body> <div>该睡觉啦，啊啊啊啊</div> </body> 表示 属性
css
05-28
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页内容样式和布局的标记语言，它可以控制网页的字体、颜色、背景、布局等外观和风格。 CSS使用选择器来选择要应用样式的元素，然后使用属性来定义这些元素的样式。例如，可以使用以下CSS代码设置所有段落的字体为14像素： ```css p { font-size: 14px; } ``` CSS属性有很多，以下是一些常见的CSS属性及其用法： - `color`：设置文本颜色； - `background-color`：设置元素背景颜色； - `font-size`：设置字体大小； - `font-family`：设置字体类型； - `text-align`：设置文本水平对齐方式； - `padding`：设置元素内边距； - `margin`：设置元素外边距； - `border`：设置元素边框； - `width`：设置元素宽度； - `height`：设置元素高度； - `display`：设置元素显示方式。 以上只是CSS的一部分内容，实际上CSS还有很多属性和技巧可以掌握。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值