CSS样式

最新推荐文章于 2022-08-18 20:25:24 发布

熬夜且瞌睡

最新推荐文章于 2022-08-18 20:25:24 发布

阅读量216

点赞数 3

分类专栏： web前端文章标签： html css web

本文链接：https://blog.csdn.net/qq_50646296/article/details/117464675

版权

web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

引言：CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

引言：CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 的语法结构为

选择器{

属性：属性的值；

}

例

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS 控制字体

font-size：18px;-----------控制文字的大小

font-family:"楷书"----------控制文字的字体

font-weight: bold（粗体） normal（正常）

color:red---------------------控制文字的颜色

line-height-----------------设置行高

font-style设置字体的风格

控制文本

text-indent:2em (取负数)----------设置对象中的中文文本缩进（一般用于一段内容前面需要两个空格时使用）

text-align: left center right--------设置文本对齐行内的方式（左，中，右）

color----------------设置文本的颜色

background-color-------设置文本的背景颜色

text-decoration: none;--------------------删除链接文字下的下划线

text-transform :none（正常显示） capitalize（每个单词以大写开头） uppercase（全部大写） lowercase（全部小写）-----------设置（英文）文本的大小写

white-space:normal(遇空白自动换行 ) pre(按原格式输出 ) nowrap( 强制在同一行中显示)--------------文本中空白处的处理

border边框

border-style：dotted solid double dashed;

border-color--------设置边框的颜色，如要设置边框四个边颜色，写四个颜色分别设置边框的上，右，下，左

border-style:dotted solid double dashed -----------上边框虚线，右边框实线，下边框双线，左边框虚线

border-width--------设置边框的宽度

boeder-radius:5px------设置圆形边框，后接弧度

外边距

CSS的外边距通过如（margin：100px;）来设置，

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 100px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h1>CSS 外边距</h1>
<div>本元素的外边距为 70 像素。</div>

</body>
</html>

结果如下：

margin-top--------设置边框顶部的外边距

margin-right-------设置边框右部的外边距

margin-bottom----设置边框底部的外边距

margin-left----------设置边框左部的外边距

设置边框四个边外边距的简写形式：

margin：15px 25px 35px 45px;分别为边框的上，右，下，左的外边距

当margin的里面的数值少于四个，外边距讲究对称性，如margin:15px 25px 60px为边框的上边距为15px，左边外边距为25px,底部的外边距为60px；

margin：25px 50px表示边框的上下外边距为25px,左右外边距为50px

margin:0px auto代表对象上下间隔为0px，左右间隔根据对象宽度自适应。

内边距

HTML中边框的内边距通过padding来设置

设置边框四个边内边距的简写形式：

padding：15px 25px 35px 45px;分别为边框的上，右，下，左的内边距

当padding的里面的数值少于四个，内边距讲究对称性，如padding:15px 25px 60px为边框的上内边距为15px，左边内边距为25px,底部的内边距为60px；

padding：25px 50px表示边框的上下内边距为25px,左右内边距为50px

margin:0px auto代表对象上下间隔为0px，左右间隔根据对象宽度自适应。

如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

div {
  width: 300px;
  padding: 25px;
}

在这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）

熬夜且瞌睡

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS样式

目录引言：CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 控制字体控制文本border边框外边距内边距引言：CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 的语法结构为选择器{ 属性：属性的值；属性：属性的值；}例body { background-color: light...
复制链接

扫一扫