css总结之文本/字体/背景/边框/显示/隐藏_ad block 禁止style包括字-优快云博客

本文链接：https://blog.youkuaiyun.com/FXX_Bran/article/details/90679163

基本属性

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。

<div style="width: 200px; height: 100px; background-color: cadetblue; ">
   设置宽高
</div>

设置宽高

文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。ltr从左到右 rtl 文本方向从右到左 inherit规定应该从父元素继承 direction 属性的值
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本 left, right, center, justify两端对齐, inherit继承父元素
text-decoration	向文本添加修饰 none, underline下划线，overline上边线，line-through删除线，blink闪烁的文本
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影 h-shadown水平阴影的位置，v-shadown垂直阴影的位置，blur模糊可选，color颜色可选
text-transform	控制元素中的字母 none，capitalize单词首字母大写，uppercase大写字母，lowercase小写字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>color</title>
    <style>
        body {color:red;}
        h1 {color:#00ff00;}
        #sb {color:rgb(0,0,255);}
    </style>
</head>
<body>
        <h1>这是标题 1</h1>
        <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
        <p id="sb">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

color
文本的方向

<p style="direction: ltr">direction 默认从左到右</p>
<p style="direction: rtl">direction 从右到左</p>

在这里插入图片描述
字符间距

<p style="letter-spacing: 4px;">我是字符间距</p>
<p style="letter-spacing: -2px;">我也是字符间距</p>

在这里插入图片描述
行高

<p style="line-height: 3em; background-color: cadetblue;">我是行高3em</p>

在这里插入图片描述
对齐

<div style="background-color: coral;">
    <p style="text-align: center">我是文本对齐的<b>居中</b>对齐</p>
    <p style="text-align: left">我是文本对齐的<b>左</b>对齐</p>
    <p style="text-align: right">我是文本对齐的<b>右</b>对齐</p>
</div>

在这里插入图片描述 各种线

<div style="background-color: darksalmon;">
    <p style="text-decoration: overline">我要上边线</p>
    <p style="text-decoration: underline">我要下边线</p>
    <p style="text-decoration: line-through">我要删除线</p>
</div>

在这里插入图片描述
首行缩进

<div>
    <p style="text-indent: 35px;">
        我是一个汗擦锁定六块腹肌卢萨卡的肌肤拉上看大家福利卡啥地方了空间啊实例看到福利卡上交电费阿拉山口的风景阿四的风景阿斯利康的风景啊实例的咖啡机阿斯利康的风景啊实例的会计法阿莱克斯的肌肤啊实例的咖啡机
    </p>
</div>

在这里插入图片描述
单词间隔

<div>
    <p style="word-spacing: 50px;">this is a word 中文 </p>
</div>

在这里插入图片描述

字体

属性	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

    <p style="font:italic bold 30px serif; ">字体简写</p>
    <p style="font-family: monospace;">字体的样式monospace</p>
    <p style="font-size: 20px;">字体的大小20px</p>
    <p style="font-style: italic">字体的样式italic</p>
    <p style="font-style: oblique">字体的样式oblique</p>
    <p style="font-style: unset">字体的样式unset</p>
    <p style="font-weight: lighter;">字体的细</p>
    <p style="font-weight: bold;">字体的细</p>

背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

<div style="background-color: lavender;">
    我是背景颜色
</div><br>
<div style="background-image: url('zhongzhi.jpg'); height: 500px;">
    我是背景图片
</div><br>
<div style="background-image: url('zhongzhi.jpg');background-size: 50px 50px;">
    我来搞定图片的大小
</div><br>
<div style="background-image: url('zhongzhi.jpg'); background-repeat: repeat-x;">
    图片横向重复
</div><br>
<div style="background-image: url('zhongzhi.jpg'); background-repeat: repeat-y;">
    图片纵向重复
</div><br>
<div style="background-image: url('zhongzhi.jpg'); background-repeat: no-repeat;">
    图片不重复
</div><br>
<div style="background-image: url('zhongzhi.jpg'); background-position: center top; background-repeat: no-repeat;">
    我搞背景图片位置
</div><br>
<div style="background-image: url('zhongzhi.jpg'); background-attachment: fixed;">
    我搞的背景图片不能动
</div><br>
<div style="background: url('zhongzhi.jpg') fixed no-repeat center;">
    我一次性搞定它们
</div><br>

边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
border-radius	设置元素为圆角css3才有的样式

border-style
在这里插入图片描述
border-width

border-color

border-radius

其他同理设置

display 显示

值	意义
none	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
block	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
inline	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
inline-block	使元素同时具有行内元素和块级元素的特点。

inline
在这里插入图片描述
**block **