显示没有下划线、字体大小为30，文本居中，背景颜色为黑色，链接为百度的超链接

时间: 2024-03-27 19:36:05 浏览: 127

常用的CSS标签标记属性翻译注释

常用的CSS标签标记属性翻译注释这里收藏一些编写网页的常用属性便于以后编写网页查询 1、字体属性(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 2、颜色和背景属性(backgroud) color(定义前景色，例如：p{color:red}) background-color(定义背景色) background-image(定义背景图片) background-repeat(背景图案重复方式)：repeat-x/repeat-y/no-repeat background-attachment(设置滚动)：scroll(滚动)/fixe(固定的) background-position(背景图案的初始位置)：percentage/length/top/left/right/bottom ### 常用的CSS标签标记属性翻译注释 #### 一、字体属性(Type) **1.1 font-family** - **定义与用途**: 指定网页中的文本使用的字体。 - **示例**: `p { font-family: "宋体", sans-serif; }` - **解释**: 当指定字体无法被浏览器识别或加载时，会使用后备字体。 **1.2 font-style** - **定义与用途**: 控制文本字体的样式。 - **选项**: - `normal`: 正常字体。 - `italic`: 斜体。 - `oblique`: 向右倾斜的字体。 - **示例**: `h1 { font-style: italic; }` **1.3 font-variant** - **定义与用途**: 控制文本中的字体变体，特别是小写字母的大写形式。 - **选项**: - `normal`: 不使用小大写字母。 - `small-caps`: 使用小大写字母。 - **示例**: `span { font-variant: small-caps; }` **1.4 font-weight** - **定义与用途**: 设置文本的粗细。 - **选项**: - `normal`: 默认粗细。 - `bold`: 加粗。 - `bolder`: 更粗。 - `lighter`: 更细。 - **示例**: `strong { font-weight: bold; }` **1.5 font-size** - **定义与用途**: 控制文本的大小。 - **单位**: - `absolute-size`: 绝对大小，如 `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`。 - `relative-size`: 相对于当前字体大小的大小，如 `larger`, `smaller`。 - `length`: 固定长度单位，如 `em`, `ex`, `px`, `cm`, `mm`, `in`, `pt`, `pc`。 - `percentage`: 百分比值。 - **示例**: `body { font-size: 16px; }` #### 二、颜色和背景属性(Background) **2.1 color** - **定义与用途**: 定义文本的颜色。 - **示例**: `p { color: #FF0000; }` - **解释**: 可以使用十六进制值、RGB/RGBA、预定义颜色名等。 **2.2 background-color** - **定义与用途**: 设置元素的背景颜色。 - **示例**: `div { background-color: #00FFFF; }` **2.3 background-image** - **定义与用途**: 设置作为背景的图像。 - **示例**: `section { background-image: url('image.jpg'); }` **2.4 background-repeat** - **定义与用途**: 控制背景图像的重复方式。 - **选项**: - `repeat`: 在水平和垂直方向重复。 - `repeat-x`: 水平方向重复。 - `repeat-y`: 垂直方向重复。 - `no-repeat`: 图像不重复。 - **示例**: `header { background-repeat: no-repeat; }` **2.5 background-attachment** - **定义与用途**: 定义背景图像是否随页面滚动。 - **选项**: - `scroll`: 图像随页面滚动。 - `fixed`: 图像固定，不随页面滚动。 - **示例**: `footer { background-attachment: fixed; }` **2.6 background-position** - **定义与用途**: 设置背景图像的位置。 - **选项**: - `percentage`: 百分比。 - `length`: 长度单位。 - `top`: 上方。 - `left`: 左侧。 - `right`: 右侧。 - `bottom`: 下方。 - **示例**: `article { background-position: center; }` #### 三、文本属性(Text) **3.1 word-spacing** - **定义与用途**: 设置单词之间的空格大小。 - **示例**: `p { word-spacing: 10px; }` **3.2 letter-spacing** - **定义与用途**: 设置字符之间的间距。 - **示例**: `span { letter-spacing: 2px; }` **3.3 text-decoration** - **定义与用途**: 控制文本装饰，如下划线、删除线等。 - **选项**: - `none`: 无装饰。 - `underline`: 下划线。 - `overline`: 上划线。 - `line-through`: 删除线。 - `blink`: 文本闪烁。 - **示例**: `a { text-decoration: underline; }` **3.4 vertical-align** - **定义与用途**: 控制行内元素的垂直对齐方式。 - **选项**: - `baseline`: 默认对齐方式。 - `sub`: 下标。 - `super`: 上标。 - `top`: 顶部对齐。 - `text-top`: 文本顶部对齐。 - `middle`: 居中对齐。 - `bottom`: 底部对齐。 - `text-bottom`: 文本底部对齐。 - **示例**: `img { vertical-align: middle; }` **3.5 text-transform** - **定义与用途**: 改变文本的大小写。 - **选项**: - `capitalize`: 将每个单词的首字母变为大写。 - `uppercase`: 转换为全大写。 - `lowercase`: 转换为全小写。 - `none`: 不改变大小写。 - **示例**: `h1 { text-transform: uppercase; }` **3.6 text-align** - **定义与用途**: 设置文本的水平对齐方式。 - **选项**: - `left`: 左对齐。 - `right`: 右对齐。 - `center`: 居中对齐。 - `justify`: 两端对齐。 - **示例**: `p { text-align: justify; }` **3.7 text-indent** - **定义与用途**: 设置段落首行的缩进量。 - **单位**: - `length`: 长度单位。 - `percentage`: 百分比。 - **示例**: `p { text-indent: 2em; }` **3.8 line-height** - **定义与用途**: 控制行与行之间的间距。 - **单位**: - `normal`: 默认行高。 - `number`: 单位为倍数。 - `length`: 长度单位。 - `percentage`: 百分比。 - **示例**: `p { line-height: 1.5; }` **3.9 超链接属性** - **定义与用途**: 定义不同状态下超链接的样式。 - **伪类**: - `:link`: 未访问过的链接。 - `:visited`: 访问过的链接。 - `:hover`: 鼠标悬停在链接上。 - **示例**: ```css a:link { color: green; text-decoration: none; } a:visited { color: red; text-decoration: underline; } a:hover { color: blue; text-decoration: underline; } ``` #### 四、块属性(Block) **4.1 边距属性(margin)** - **定义与用途**: 设置元素周围的外边距。 - **选项**: - `margin-top`: 上边距。 - `margin-right`: 右边距。 - `margin-bottom`: 下边距。 - `margin-left`: 左边距。 - **示例**: `div { margin: 20px 10px; }` **4.2 填充距属性(padding)** - **定义与用途**: 设置元素内部的填充。 - **选项**: - `padding-top`: 顶部填充。 - `padding-right`: 右侧填充。 - `padding-bottom`: 底部填充。 - `padding-left`: 左侧填充。 - **示例**: `p { padding: 10px 5px; }` #### 五、边框属性(Border) **5.1 border-width** - **定义与用途**: 设置边框的宽度。 - **选项**: - `border-top-width`: 顶部边框宽度。 - `border-right-width`: 右边框宽度。 - `border-bottom-width`: 底部边框宽度。 - `border-left-width`: 左边框宽度。 - **示例**: `table { border-top-width: 1px; }` **5.2 border-color** - **定义与用途**: 设置边框的颜色。 - **示例**: `button { border-color: #000000; }` **5.3 border-style** - **定义与用途**: 设置边框的样式。 - **选项**: - `none`: 无边框。 - `solid`: 实线。 - `dashed`: 虚线。 - `dotted`: 点线。 - `double`: 双线。 - `groove`: 凹槽。 - `ridge`: 岭状。 - `inset`: 内嵌。 - `outset`: 外凸。 - **示例**: `input { border-style: dashed; }` **5.4 组合边框属性** - **定义与用途**: 同时设置边框宽度、颜色和样式。 - **示例**: ```css div { border-top: 2px solid red; border-right: 1px dotted blue; border-bottom: 3px double green; border-left: 4px groove #000; } ``` #### 六、图文混排 **6.1 width 和 height** - **定义与用途**: 设置元素的宽度和高度。 - **示例**: `img { width: 100px; height: 150px; }` **6.2 float** - **定义与用途**: 控制元素的浮动，让文本环绕该元素。 - **选项**: - `left`: 元素向左浮动。 - `right`: 元素向右浮动。 - **示例**: `figure { float: left; }` **6.3 clear** - **定义与用途**: 设置元素的周围不能有浮动元素。 - **选项**: - `left`: 元素左侧不允许有浮动元素。 - `right`: 元素右侧不允许有浮动元素。 - `both`: 元素两侧都不允许有浮动元素。 - **示例**: `p { clear: both; }` #### 七、项目符号和编号(List) **7.1 display** - **定义与用途**: 设置元素的显示类型。 - **示例**: `ul { display: block; }` **7.2 white-space** - **定义与用途**: 控制空白符的行为。 - **选项**: - `normal`: 合并多个空白符为空格。 - `pre`: 保留空白符和换行符。 - `nowrap`: 不换行。 - **示例**: `pre { white-space: pre; }` **7.3 list-style-type** - **定义与用途**: 设置列表项前面的标记。 - **选项**: - `disc`: 圆点。 - `circle`: 圆圈。 - `square`: 方框。 - `decimal`: 阿拉伯数字。 - `lower-roman`: 小写罗马数字。 - `upper-roman`: 大写罗马数字。 - `lower-alpha`: 小写字母。 - `upper-alpha`: 大写字母。 - `none`: 无标记。 - **示例**: `ol { list-style-type: decimal; }` **7.4 list-style-image** - **定义与用途**: 设置列表项前面的图像。 - **示例**: `ul { list-style-image: url('bullet.png'); }` **7.5 list-style-position** - **定义与用途**: 控制列表项标记的位置。 - **选项**: - `inside`: 标记位于文本区域内。 - `outside`: 标记位于文本区域外。 - **示例**: `dl { list-style-position: inside; }` 以上这些CSS属性是网页设计中非常基础且常用的属性，掌握它们能够帮助开发者更好地控制网页的布局和外观，实现更加美观和实用的设计效果。

可以这样编写一个没有下划线、字体大小为30，文本居中，背景颜色为黑色，链接为百度的超链接： ```html <a href="https://www.baidu.com" style="text-decoration:none; font-size:30px; text-align:center; background-color:black; color:white; display:block; width:200px;">百度</a> ``` 其中，`text-decoration:none` 表示去掉下划线，`font-size:30px` 表示字体大小为 30，`text-align:center` 表示文本居中，`background-color:black` 表示背景颜色为黑色，`color:white` 表示字体颜色为白色，`display:block` 表示将链接设置为块级元素，`width:200px` 表示设置宽度为 200 像素。

阅读全文

显示没有下划线、字体大小为30，文本居中，背景颜色为黑色，链接为百度的超链接

相关推荐

HTML教程：超链接与Internet应用链接

使用CSS美化网页：字体与文本样式

用js实现显示没有下划线字体大小为30文本居中背景颜色为黑色链接为百度的超链接

百度富文本编辑器

网站建设文字及图片超链接代码.pdf

网站开发之HTML基础知识及超链接（二）1

简单富文本

富文本编辑框

eWebEditor文本编辑器

富文本框控件

HTML超链接与互联网应用详解

HTML教程：超链接与非WWW应用的使用

CSS超链接样式详解：四种状态与常用属性

Textile文本样式控制：字体、颜色与排版的艺术

超链接的应用与优化技巧

左导航项中，如何声明可点击的超链接，超链接内容为分别声明的图标与span文本

揭秘百度ueditor工具栏各元素功能详解

最新推荐

Android更改EditText下划线颜色样式的方法

css控制超链接(css超链接样式)

css通过伪类来设置超链接样式附示例

原生js图片圆形排列按钮控制3D旋转切换插件.zip

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"