css样式之属性操作

最新推荐文章于 2022-07-24 18:21:07 发布

余生再见

最新推荐文章于 2022-07-24 18:21:07 发布

阅读量420

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hewindows/article/details/103114411

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css样式之属性操作

一、文本属性

1.text-align:cnter 文本居中

2.line heigth 垂直居中：行高，和高度对应

3.设置图片与文本的距离：vertical-align

4.text-decoration:none 去掉超链接下划线

5.要是给a标签修改颜色的时候，就定到a标签上，用继承有

时候是搞不定的因为继承的级别是很低的，如果a标签设置

了样式，是不会继承父亲的

6.首行缩进：text-indent:30px

7.font-style:oblique 或者italic…(设置字体的样式为斜体)

二.字体属性(type)

font-family(使用什么字体)

font-style(字体的样式，是否斜体)：normal/italic/oblique

font-variant(字体大小写)：normal/small-caps

font-weight(字体的粗细)：normal/bold/bolder/lithter

font-size(字体的大小)：absolute-size/relative-size/length/percentage

三、背景属性

1.background-color:背景颜色

2.background-image:url(‘11.jpg’); 背景图片链接

3.background-repeat:repeat-x; x轴平铺

4.background-repeat:no-repeat; 不重复

5.background-position:400px 200px 调整背景的位置（距左。距右）

6.background-position: center:center; 背景居中

简写：
background: url(‘11.jpg’) no-repeat center;

四.块属性(block)

边距属性：

margin-top(设置顶边距)

margin-right(设置右边距)

margin-bottom(设置底边距)

margin-left(设置左边距)填充距属性：

padding-top设置顶端真充距)

padding-right设置顶端真充距)

padding-bottom设置顶端真充距)

padding-left设置顶端真充距)

列表属性

去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}

上面两行也可写成下面一行
去掉盒子上面的间隙：*{margin:0; padding :0;}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            font-family: 华文中宋;
            list-style: none; //去掉点
            /*list-style: circle;//空心圆*/
            /*list-style: disc;//实心圆（默认也是实心圆）*/
        }
        ul{
            padding: 0; //把字体移到前面

        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
    </ul>
</div>
</body>
</html>

五.边框属性(border)

border-top-width(顶端边框宽度)

border-right-width(右端边框宽度)

border-bottom-width(底端边框宽度)

border-left-width(d左边框宽度)

border-width(一次定义边框宽度)

border-color(设置边框颜色)

border-style(设置边框样式)

border-top(一次定义顶端各种属性)

border-right(一次定义右端各种属性)

border-bottom(一次定义底端各种属性)

border-left(一次定义左端各种属性)

图文混排：

width(定义宽度属性)

height(定义高度属性)

float(文字环绕在一个元素的四周)

clear(定义某一边是否有环绕)

六.display属性

display属性
1.将块级标签设置成内联标签：disply：inline;

2.将内联标签设置成块级标签：disply：block;

3.内联块级标签：像块级一样可设长宽，也可像内联一样在一行显示：

display:inline-block;

4.display:none; 吧不想让用户看到的给隐藏了（很重要的一个属性
）

5.visibility :hiddon；也是隐藏

**注意与visibility:hidden的区别：

visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未
　　
　　隐藏之前一样的空间。也就是说，该元素虽然被隐藏
　　了，但仍
　　
　　然会影响布局。

display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空
　　间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间
　　也会从页面布局中消失

项目符号和编号(list)

display(定义是否显示)

white-space(怎样处理空白部分)：normal/pre/nowrap

list-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square（方形）

/decimal（阿拉伯数字） /lower-roman(小写罗马数字 )/upper-roman(大写罗马数

字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/nore

list-style-tyle(在列表前加图案):/none

list-style-position(决定列表项中第二行的起邕位置)

list-style(一次性定义所有属性)

七、定位（positioning）即层属性

Type：设定对象的定位方式。

有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static

（无特殊定位）。相对应的

Visibility：设定对象定位层的最初显示状态。有三种状态：Inherit（继承父层的显示属性）、

Visible（对象可视）、Hidden隐藏对象。相对应的 CSS属性是”visibility”。

Z-Index：设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是

正值也可以是负值。相对应的 CSS属性是”z-index”。

Overflow：设置如果层的内容超出了层的大小时如何处理。有四种处理方式：visible，增加

层的大小，从而将层的所有内容显示出来；hidden，保持层的大小不变，将超出层的内容剪裁掉；Scroll，总是显示滚动；Auto，只有在内容超出层的边界时才显示滚动条。相对应的

CSS属性是”overflow”。 Placement：设置对象定位层的位置和大小。可以分别设置 lef（t左

边定位）、top（顶部定位）、width（宽）、height（高）。相对应的 CSS属性分别是”left;top;

width;height”。Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可

以理解为在定位层上放一个矩形遮罩的效果。相对应的 CSS属性是”clip”。

八、扩展（Extensions）

Pagebreak：在打印的时候强迫在样式控制的对象前后换页。

Before：设置对象前出现的页分割符。设置为 always时，始终在对象之前插入页分割符。相

对应的 CSS属性是”page-break-before”。

After：设置对象后出现的页分割符。设置为 always时，始终在对象之后插入页分割符。相

对应的 CSS属性是”’>。

欢迎使用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