带你打开盒子的世界，获得无上神力之CSS

最新推荐文章于 2024-08-12 22:06:26 发布

百鬼抖臀

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量381

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/Long15537565128/article/details/104417268

版权

css是什么？

   ***CSS**层叠样式表(英文全称：Cascading Style Sheets)就是一种用来美化HTML的代码。。

css怎么用？

   **css代码的写法有三种**：
   
    1）行内写法，直接把CSS代码当作标签的属性，写在开始标签中，如下：
        <h1 style="color: red;">Hello CSS~</h1>
       每一个标签都有一个属性，叫style，它的属性值就是CSS代码。
       
    2）内部写法，把CSS代码写在style标签中。通常会把style标签放到head标签中。
        在学习时，为了方便，通常使用内部写法，项目中，一般不用。
        
    3）外部写法
        创建一个CSS文件，在HTML中通过link标签引入
        在真实项目中，CSS通常也会放到CSS文件中，通过link标签引入

   <link rel="stylesheet" href="./news.css">

        Link标签有两个作用：1. 定义文档与外部资源的关系；2. 是链接样式表。link标签是用于当前文档引用外部文档的这个标签的rel属性用于设置对象和链接目标间的关系，说白了就是指明你链进来的对象是个什么。

        rel常用属性值配置的意思：Stylesheet -- 定义一个外部加载的样式表 。（还有很多。。。我也不了解）

选择器

怎么让样式链接到标签，CSS中通过**选择器**。

声明块{属性名:属性值;属性名:属性值;属性名:属性值;}
CSS和HTML一样，写错了，不会报错，仅仅不起效果而已。 一个属性与一个属性之间需要使用分号隔开。最后一个属性的分号可以不写。

: ; 必须是英文的  。

分类

标签选择器 div

表示选中页面中所有的div。标签钱可以不用加点如:

**div**{
            color: red;
            background-color: skyblue;
        }

class选择器 .item

表示选中页面中所有有class="item" 的元素。中间使用空格隔开，可以通过相同的class选中多个不同的标签。 如：

`<div class="box1 box2 box3">`（同一个标签可以有多个class）

```css
  **.box1**{
            color: red;
        }
  **.box2**{
            background-color: skyblue;
        }

    结果都会对这个div产生效果。如果要作用的属性一样，后面的会覆盖前面。这就和优先性有关后面会详细说的。

3.ID选择器#box（不是很常用）

   表示选中页面中有id="box"的元素
   可以给页面上多个元素设置相同的ID，虽然可以起效果，但是绝对不要这么写。ID表示唯一，只有页面中某一个非常独立的区域的话，才会使用ID选择器。也就是说同一个ID值，在页面上只能出现一次。是行业的潜规则 如，

<div id="box">div box</div>       
   **#box{**
            color: red;
            background-color: skyblue;
        }

4.后代选择器 .father ul.item

   表示选中某一个元素的后代元素（注意空格隔开，除非后面紧跟的是它孩子的类名）如，

<div class="father">
        <ul>
            <li class="item"><a href="">百度</a></li>
            <li><a href="">淘宝</a></li>
            <li><a href="">京东</a></li>
        </ul>
    </div>

**.father ul.item**{
            background-color: gold;
        }

5.分组选择器：并集选择器逗号 div, p, h1, .itme

    表示对选中的标签、类都可以一同设置样式

6.通配符选择器 *

    表示选中页面中所有的标签。
    如，*{margin:0;padding:0;}一般不会用的，在重置样式中会直接把用的标签选中，这样相比会提高一定的效率，虽然不多。

7.交集选择器：h1.itme1

表示选中h1并且h1中有class="item1"的元素

8.伪类选择器：hover

 表示鼠标放上去的一个状态。伪类选择器很多目前先学了这一个。伪类：不存在这么一个类 class="hover"(一般用在a标签上面)如，

<a href="http://www.baidu.com">百度一下</a>
       a:hover{
            color: red;
        }

属性

这里面的水深的很啊。。。再强调两遍细节细节很重要！！！注意掌握不同属性的特点以及差异很重要。想想昨晚的一个简单页面就耗费我一个晚上，真的想吐血。有时候一个很简单的细节没注意，就会让你的真个界面都产生变动。下次说到浮动的时候会详细说我人生第一个页面的实现。哈哈哈哈链接如下利牛首页的实现即使看似完成了复制，其实还是很多小细节我还是没搞定。。。

不说废话，谈到CSS属性目前我也只掌握了皮毛的皮毛，咱就先从最基本的字体属性说起。

字体属性

关于字体设置的相关属性：
    font-family  字体的形式 
    font-size  字体的大小
    font-style  字体的是否倾斜
    font-weight  字体的是否加粗
    font  是前面几个的复合属性
    color 字体的颜色

font-family：
    1)用来设置字体的形式，设置什么样的字体。取决于用户电脑装了什么样的字体。
    2)通常window用户字体文件：C:\Windows\Fonts   最基本你的电脑上是有宋体。
    3)如果没有设置字体，默认是"Microsoft YaHei";
    4)对于font-family来说，后面可以跟上多个字体，优先级是从前向后，如果电脑上有这个字体就使用这个字体。
    5)对于我们开发者来说，字体不需要我们设计，由设计师来决定。

font-size：用来设置字体的大小
    1)在谷歌浏览器中，针对span,p...常规标签中的字体，默认大小就是16px。
    2)通常一个网页中字体大小是12px或14px

color: 设置字体的颜色
    1) 设置颜色的时候，可以使用单词，但是用的比较少。
    2) 通常会使用16进制来表示颜色  _ _  _ _  _ _  前两位表示红  中间两位表示绿  后两位表示蓝
    3) 使用rgba()来表示颜色  red  green  blue  a透明度
    4) 项目中使用16进制来表示颜色用的相当多
    6) 有很多取颜色的工具，帮我们取颜色
    7) 如果设置a标签中内容的颜色，必须要选中a标签

font-style：用来设置字体是否倾斜
    1) 最常用的属性值有两个，一个是normal， 一个是italic
    2) 通常调用em不倾斜

font-weight：用来设置字体是否加粗
    1) 最常用的属性值有两个，一个是normal， 一个是bold  bolder表示更粗
    2) 通常调用hn不加粗
    3) 可以设置数字 100  200  300  400 ...  用不到

font：是前面所有属性的一个复合属性
    font: font-style, font-weight, font-size, font-family
    如：font: italic bold 30px "黑体";
    1）font-style, font-weight 可以省略不写，也可以交换位置
    2）font-size, font-family  不可以省略不写，也不可以交换位置
    3）font-style, font-weight不写的话，就是默认值 normal
    4）每个属性值中间使用空格隔开
    5）font属性中不能写color属性

字体设置的**继承性**：
对于字体的设置，只需要在body中设置就OK，其它的标签都继承这个属性。

字体属性主要就是一些字体样式的改动，容易掌握。


补充一下font的知识点：
    font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。
    font-style
    font-variant
    font-weight
    font-size
    line-height
    font-family

font: bold 24px/1 sans-serif;

    24px表示font-size  
    /1  表示line-height=1   表示line-height=24px
    sans-serif 表示font-family

文本属性

字体和文本区别？
答：大量的字体就构成了文本。

对于文本的设置，常用的属性如下：
    text-indent  设置首行空两格   logo
    text-align  设置文本对齐方式  
    text-decoration 设置文本的修饰线
    line-height  设置文本的行高

text-decoration：
    设置文本的修饰线
    underline  下划线
    overline  上划线  基本上没用
    line-throuth  删除线  
    none 没有修饰线

    注意的细节：
        1）a标签默认就有下划线，通常在页面中会去掉a标签默认的下划线，当鼠标放上去时，添加下划线，并且改变它的颜色。
        2）对于line-throuth 通常会用到电商网站中的原价上。

text-indent：
    indent是缩进的意思，表示文本缩进。 首行空两格。
    em:是一个单位，表示一个汉字的高度，汉字是正方形，em也可以表示一个汉字的宽度。

    注意细节：
        1）text-indent可以设置负值，向另一个方向缩进。
        2）对于网站的Logo，通常会写文本，然后把文本设置text-indent:-1000px  目的就是让经隐藏掉。
text-align:
    设置文本的对齐方式，常用的属性值如下：
    left   左对齐   默认值
    center 居中对齐   
    right  右对齐  
    justify  用的不多  两端对齐   只对英文有效

line-height:
    设置文本的行高（一行的高度）

    注意细节：
        1）行高可以设置px
        2）行高可以设置陪数，如1.5表示是字体大小的1.5倍。
        3）利用line-height实现垂直居中。
        4）可以把line-height设置到font属性中。 用的比较多。

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎

百鬼抖臀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带你打开盒子的世界，获得无上神力之CSS

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫