思潮课程 / 前端开发 / 正文

css常用款式

2024-12-30前端开发 阅读 8

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常用款式详解

一、字体款式

1. font-family

font-family特点用于设置字体类型,能够指定多个字体,浏览器会依照次序测验加载,直到找到适宜的字体。

```css

body {

font-family: Arial, sans-serif;

2. font-size

font-size特点用于设置字体巨细,能够指定像素值、百分比或相对单位。

```css

h1 {

font-size: 24px;

3. font-weight

font-weight特点用于设置字体的粗细,常见的值有normal(正常)、bold(粗体)、lighter(细体)等。

```css

font-weight: bold;

4. color

color特点用于设置字体色彩,能够指定色彩称号、十六进制值或RGB值。

```css

color: 333;

二、文本款式

文本款式首要用来操控网页中文字的摆放、对齐、装修等作用。

1. text-align

text-align特点用于设置文本对齐方法,常见的值有left(左对齐)、center(居中对齐)、right(右对齐)和justify(两头对齐)。

```css

.container {

text-align: center;

2. text-indent

text-indent特点用于设置阶段的首行缩进,常用于阶段的美化。

```css

text-indent: 2em;

3. line-height

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;

三、布景款式

布景款式用于设置网页元素的布景色彩、图片、方位等作用。

1. background-color

background-color特点用于设置布景色彩,能够指定色彩称号、十六进制值或RGB值。

```css

body {

background-color: f5f5f5;

2. background-image

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

margin特点用于设置元素的外边距,能够指定上、右、下、左四个方向的值。

```css

.container {

margin: 10px 20px 30px 40px;

2

猜你喜欢

  • css偶数挑选器, 什么是CSS偶数挑选器?前端开发

    css偶数挑选器, 什么是CSS偶数挑选器?

    CSS中没有直接的挑选器来专门挑选偶数元素。可是,你能够运用`:nthchild`伪类挑选器来挑选偶数元素。`:nthchild`伪类挑选器答应你依据元素的序号来挑选它们。运用`:nthchild`能够挑选一切的偶数元素。例如,假如你有一个...

    2025-01-06 2
  • html中字体款式, HTML字体款式的基本概念前端开发

    html中字体款式, HTML字体款式的基本概念

    1.`fontfamily`:设置字体族,例如ArialTimesNewRoman宋体等。2.`fontsize`:设置字体巨细,能够运用像素(px)、点(pt)或百分比(%)等单位。3.`fontweight`:设置字体...

    2025-01-06 0
  • html网页游戏开发,入门攻略与技巧共享前端开发

    html网页游戏开发,入门攻略与技巧共享

    1.学习根底知识:HTML:了解怎么创立网页结构,包含元素、特点和嵌套。CSS:学习怎么规划网页款式,包含布局、色彩、字体等。JavaScript:把握怎么为网页增加交互性,处理用户输入和游戏逻辑。2.挑选开发东...

    2025-01-06 1
  • css3旋转, 什么是CSS3旋转?前端开发

    css3旋转, 什么是CSS3旋转?

    CSS3中的旋转能够经过`transform`特点来完成。`transform`特点答应你旋转、缩放、歪斜或移动元素。要完成旋转,你能够运用`rotate`函数。下面是一些关于怎么运用CSS3进行旋转的示例:1.根底旋转:```cs...

    2025-01-06 1
  • vue服务器端烘托,原理、优势与完成前端开发

    vue服务器端烘托,原理、优势与完成

    Vue.js是一个渐进式JavaScript结构,它答应开发者经过组合可复用的组件来构建用户界面。服务器端烘托(SSR)是一种技能,它答应服务器在接收到恳求时,在服务器上烘托完好的HTML页面,然后将这些页面发送到浏览器,而不是仅...

    2025-01-06 0
  • 行距离css, 行距离的基本概念前端开发

    行距离css, 行距离的基本概念

    在CSS中,行距离能够经过多种办法来设置。以下是几种常用的办法:1.运用`lineheight`特点:`lineheight`特点能够用来设置行距离,其值能够是详细的数值(如`20px`),也能够是相对于字体大小的倍数(如...

    2025-01-06 2
  • html表达代码前端开发

    html表达代码

    当然能够!这里有一个简略的HTML代码示例,用于创立一个表达页面。这个页面包含了一个心形图画和一些文本,你能够依据自己的需求修正它。```html表达页面body{textalign:center;backgro...

    2025-01-06 3
  • html居中,二、运用CSS款式完成居中前端开发

    html居中,二、运用CSS款式完成居中

    HTML居中能够分为文本居中、图片居中、容器居中等多种状况。下面是一些常见的居中办法:1.文本居中:运用`textalign:center;`特点来使文本水平居中。示例代码:```html这是居...

    2025-01-06 2