css常用款式
时间:2024-12-30阅读数:12
1. 字体款式: `fontfamily`: 设置元素的字体。 `fontsize`: 设置元素的字体巨细。 `fontweight`: 设置元素的字体粗细。 `fontstyle`: 设置元素的字体款式(如斜体)。 `fontvariant`: 设置元素的字体变体(如小型大写字母)。 `lineheight`: 设置元素的行高。
2. 文本款式: `color`: 设置元素文本的色彩。 `textalign`: 设置元素文本的对齐方法(如左对齐、右对齐、居中对齐)。 `textdecoration`: 设置元素的文本装修(如下划线、删去线)。 `textindent`: 设置元素的文本首行缩进。 `textshadow`: 设置元素的文本暗影。
3. 布景款式: `backgroundcolor`: 设置元素的布景色彩。 `backgroundimage`: 设置元素的布景图画。 `backgroundrepeat`: 设置布景图画是否重复。 `backgroundposition`: 设置布景图画的方位。 `backgroundsize`: 设置布景图画的巨细。 `backgroundattachment`: 设置布景图画是否随页面翻滚。
4. 边框款式: `border`: 设置元素的边框。 `borderwidth`: 设置元素边框的宽度。 `borderstyle`: 设置元素边框的款式(如实线、虚线、点线)。 `bordercolor`: 设置元素边框的色彩。 `borderradius`: 设置元素边框的圆角半径。
5. 尺度和布局: `width`: 设置元素的宽度。 `height`: 设置元素的高度。 `margin`: 设置元素的外边距。 `padding`: 设置元素的内边距。 `display`: 设置元素的显现类型(如块级、内联、内联块级、表格、flex、grid等)。 `position`: 设置元素的方位(如静态、相对、肯定、固定、粘性)。 `float`: 设置元素的起浮(如左起浮、右起浮)。 `clear`: 铲除元素的起浮。
6. 列表款式: `liststyletype`: 设置列表项的符号类型(如圆点、数字、方形)。 `liststyleimage`: 设置列表项的符号图画。 `liststyleposition`: 设置列表项的符号方位(如内联、外边距)。
7. 其他款式: `opacity`: 设置元素的透明度。 `cursor`: 设置鼠标悬停在元素上时的光标款式。 `overflow`: 设置元素内容溢出的处理方法(如翻滚、躲藏、可见)。 `visibility`: 设置元素的可见性(如可见、躲藏)。 `zindex`: 设置元素的堆叠次序。
这些仅仅CSS常用款式中的一小部分,CSS供给了非常丰富的款式特点,能够根据需要挑选适宜的特点来规划网页的款式。
CSS常用款式详解
一、字体款式
![](https://ps.ssl.qhimg.com/t02ceed22f9745e07bc.jpg)
1. font-family
font-family特点用于设置字体类型,能够指定多个字体,浏览器会依照次序测验加载,直到找到适宜的字体。
```css
body {
font-family: Arial, sans-serif;
2. font-size
![](https://ps.ssl.qhimg.com/t021930d8da9e10e656.jpg)
font-size特点用于设置字体巨细,能够指定像素值、百分比或相对单位。
```css
h1 {
font-size: 24px;
3. font-weight
![](https://ps.ssl.qhimg.com/t025a885fa59e7396dc.jpg)
font-weight特点用于设置字体的粗细,常见的值有normal(正常)、bold(粗体)、lighter(细体)等。
```css
font-weight: bold;
4. color
![](https://ps.ssl.qhimg.com/t028b7d1f1d22e8f98c.jpg)
color特点用于设置字体色彩,能够指定色彩称号、十六进制值或RGB值。
```css
color: 333;
二、文本款式
![](https://ps.ssl.qhimg.com/t02dc6d85c83031b7a8.jpg)
文本款式首要用来操控网页中文字的摆放、对齐、装修等作用。
1. text-align
![](https://ps.ssl.qhimg.com/t02aefa25e48240758c.jpg)
text-align特点用于设置文本对齐方法,常见的值有left(左对齐)、center(居中对齐)、right(右对齐)和justify(两头对齐)。
```css
.container {
text-align: center;
2. text-indent
![](https://ps.ssl.qhimg.com/t02165600f1393aa883.jpg)
text-indent特点用于设置阶段的首行缩进,常用于阶段的美化。
```css
text-indent: 2em;
3. line-height
![](https://ps.ssl.qhimg.com/t027f21d3722253307a.jpg)
line-height特点用于设置行高,能够协助改进可读性,特别是关于多行文本。
```css
line-height: 1.5;
4. text-decoration
text-decoration特点用于设置文本的装修作用,常见的值有underline(下划线)、overline(上划线)、line-through(中划线)和none(去掉装修)。
```css
text-decoration: none;
5. text-shadow
text-shadow特点用于设置文本的暗影,能够增加暗影色彩、水平偏移量、笔直偏移量和暗影的含糊半径。
```css
h1 {
text-shadow: 2px 2px 4px 333;
三、布景款式
![](https://ps.ssl.qhimg.com/t0292faa0a78d3b8c3d.jpg)
布景款式用于设置网页元素的布景色彩、图片、方位等作用。
1. background-color
background-color特点用于设置布景色彩,能够指定色彩称号、十六进制值或RGB值。
```css
body {
background-color: f5f5f5;
2. background-image
![](https://ps.ssl.qhimg.com/t0242ed9530a65b8bc0.jpg)
background-image特点用于设置布景图片,能够指定图片途径。
```css
.container {
background-image: url('background.jpg');
3. background-position
background-position特点用于设置布景图片的方位,能够指定水平偏移量和笔直偏移量。
```css
.container {
background-position: 50% 50%;
4. background-repeat
background-repeat特点用于设置布景图片的重复方法,常见的值有no-repeat(不重复)、repeat(重复)等。
```css
.container {
background-repeat: no-repeat;
四、盒子模型
盒子模型是CSS中非常重要的概念,它决议了网页元素的尺度、边框、内边距和外边距。
1. margin
![](https://ps.ssl.qhimg.com/t028934415c34362c56.jpg)
margin特点用于设置元素的外边距,能够指定上、右、下、左四个方向的值。
```css
.container {
margin: 10px 20px 30px 40px;
2
本站所有图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:[email protected]
猜你喜欢
-
html特殊符号代码,html特殊符号代码大全
HTML特殊符号代码,一般用于在网页中刺进一些无法直接经过键盘输入的字符,如版权符号?、商标符号?、欧元符号€",metadata:{}}}qwe2,st...
2025-01-21前端开发 -
h5和html5的差异
H5一般是指HTML5,但它们之间有一些纤细的差异。HTML5(HyperTextMarkupLanguage5)是HTML的最新版别,它是一种用于创立网页的标准符号言语。HTML5引入了许多新的特性,如新的元素、特点和API,这些特性使得网页开发愈加高效和灵敏。HTML5的首要意图是进步网页...。
2025-01-21前端开发 -
html开发东西有哪些,HTML5 开发东西概述
HTML开发东西多种多样,从简略的文本编辑器到功用强壮的集成开发环境(IDE),以下是几种常用的HTML开发东西:1.文本编辑器:Notepad:一款免费开源的文本和源代码编辑器,支撑多种编程言语。SublimeText:一个轻量级的文本编辑器,支撑多种编程言语和插件。...。
2025-01-21前端开发 -
css让文字笔直居中, 运用line-height特点完成笔直居中
要让文字在CSS中笔直居中,您能够运用多种办法,具体取决于您的布局需求。以下是几种常见的办法:1.运用Flexbox:Flexbox是一种现代的布局办法...
2025-01-21前端开发 -
css表格距离, 表格距离概述
CSS中调整表格距离能够经过设置`borderspacing`特点来完成。这个特点界说了表格中单元格之间的距离。假如表格的`bordercollapse`特点被设置为`separate`(这是默许值),则`borderspacing`特点收效。例如,假如你想设置一个表格的单元格之间的水平缓笔直距离各...。
2025-01-21前端开发