day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性
1.1 文字字体：font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
* {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif} *表示所有文字字体都是一样的样式 1.2 字体大小：如果设置成inherit表示继承父元素的字体大小值。
p {font-size: 14px;} 1.3 字重（粗细): font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值 p{font-weight:lighter} 1.4 文本颜色
1.4.1 十六进制值 - 如: ＃FF0000 前面两数字代表red，中间两数字代表green，最后两数字代表blue
1.4.2 一个RGB值 - 如: RGB(255,0,0)
1.4.3 颜色的名称 - 如: red
1.4.4 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。 p{color:rgb(255,0,0)}
p{color:＃FF0000} 2. 文字属性
2.1 文字对齐：text-align
值 描述
left 左边对齐 默认值
right 右对齐
center 左右居中对齐
justify 两端对齐 p{
text-align:center
}
上下居中：
vertical-align:middle;
2.2 文字装饰：text-decoration
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
p{
text-decoration :underline
}
常用的为去掉a标签默认的下划线：
a {
text-decoration: none;
}
2.3 首行缩进： text-indent 将段落的第一行往右边缩进 32像素：如果字体是16像素，那么32像素就有向右缩进两个字体的效果
p {
text-indent: 32px;
}
3. 背景属性 background
3.1 背景颜色：background-color
div{
background-color:red
}
3.2 背景图片: background-image，本地图片和网络图片都可以
div{
background-image:url("1.jpg")
}
3.3 背景重复：background-repeat
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
.c1{
width:600px;
height:600px;
background-image:url("1.jpg");
background-repeat: no-repeat;
}
3.4 背景位置：background-position
.c1{
width:600px;
height:600px;
background-image:url("1.jpg");
background-repeat: no-repeat;
background-position:center
}
center居中；50% 50%也是居中；200px 200px位于横向200像素纵向200像素的位置；right top右上角
3.5 简写：
background:red url("1.jpg") no-repeat right top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求
3.6 示例：背景图不动，其他内容可以上下滚动：
html:
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
css:
.c1{
height:300px;
background-color:red
}
.c2{
height:300px;
background:url("4.jpg") no-repeat center;
background-attachment:fixed
}
.c3{
height:300px;
background-color:green
}
3.7 注意：background-color在浏览器没有显示，是因为缺少padding 或 height 或 文字 或 图片 等等内容，或者需要清除浮动才能显示。
4. 边框 border
4.1 边框属性
border-width: 2px
border-color: red
border-style: solid
简写：border: 2px red solid;
4.2 边框样式 border-style，solid比较常用。
值 描述
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
border-style: solid
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：border-right比较常用
border-top-style: solid
border-bottom-style: solid
border-left-style: solid
border-right-style: solid
border-top-color: red
border-bottom-color: red
border-left-color: red
border-right-color: red
border-top-width: 2px
border-bottom-width: 2px
border-left-width: 2px
border-right-width: 2px
简写：border-right: 2px red solid
4.3 border-radius
用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。
4.4 display属性
值 意义
display:none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:block 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:inline 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:inline-block 使元素同时具有行内元素和块级元素的特点。
示例：
<body>
<ul >
<li>手机配件</li>
<li>电脑</li>
<li>家电</li>
<li class="c1">旅游</li>
</ul>
</body>
ul{
list-style-type:none /*取消列表前面的圆点*/
}
li{
display:inline; /*li是块级标签，可把列表由竖向改为横向，按行内元素显示*/
border-right:2px red solid /*添加右边框*/
}
.c1{
border-right:none /*最后一个内容取消右边框*/
}
4.5 注意：border在浏览器显示一条直线，没有撑起来，是因为缺少padding 或 height 或 文字 或 图片 等等内容，或者需要清除浮动才能显示。
5. CSS盒子模型
margin(外边框)：用于控制元素与元素之间的距离，从视觉角度上达到相互隔开的目的。
Border(边框): 围绕在内边距和内容外的边框。
padding(内填充): 用于控制内容与边框之间的距离；
Content(内容): 盒子的内容，显示文本和图像。
5.1 margin外边框
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
简写的顺序：上右下左
.margin-test {
margin: 5px 10px 15px 20px;
}
常见左右居中：浏览器宽度的中间，上下距离0，左右auto自动居中
.mycenter {
margin: 0 auto;
}
常用简写方式：
提供一个，用于四边；margin: 5px
提供两个，第一个用于上－下，第二个用于左－右；margin: 5px 10px
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
示例：div里面嵌套a和b标签，a和b是内联标签，在这里是横着摆放，b距离a是200px。
<body>
<div>
<a href="">aaa</a>
<b>bbb</b>
</div>
</body>
div>a{
margin-right:200px
}
5.2 padding内填充
.padding-test {
padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;
}
简写的顺序：上右下左
.padding-test {
padding: 5px 10px 15px 20px;
}
常用简写方式：
提供一个，用于四边；padding: 5px
提供两个，第一个用于上－下，第二个用于左－右；padding: 5px 10px
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
示例：
<body>
<div>
我是div
</div>
</body>
div{
width:300px;
height:200px;
margin:5px;
border:10px red solid;
padding:10px;
}
day67-CSS字体属性、文字属性、背景属性、css盒子模型的更多相关文章
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- CSS字体连写及外观属性
一.font:字体连写 使用font属性时,必须按以下语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开.注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-f ...
- HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性
一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性 属性 描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-ima ...
- CSS属性：背景属性（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. background系列属性 常见背景属性 CSS样式中,常见的背景属性 ...
- CSS背景属性background
background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...
- css 02-CSS属性：背景属性
02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...
随机推荐
- es6 part 1 //const let
1. let 命令 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ...
- 51nod 1201：整数划分 超级好的DP题目
1201 整数划分 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 将N分为若干个不同整数的和,有多少种不同的划分方式,例如:n = 6,{6} { ...
- CSS - 自学笔记
2018-12-14 ----- 1 所有元素的锚点默认就是它的物理中心 2 改变锚点位置的方法: transform-origin: x-axis y-axis z-axis; 3 ps里在层级里选 ...
- cf 478D.Santa Claus and a Palindrome
原来set,priority_queue也可以映射..涨姿势2333 比较麻烦的应该就是判断自身回文的串是选2个还是选一个吧. #include<bits/stdc++.h> #defin ...
- 详解contextConfigLocation|Spring启动过程详解(转)
原文链接:https://blog.csdn.net/qw222pzx/article/details/78191670 spring的应用初始化流程一直没有搞明白,刚刚又碰到了相关的问题.决定得好好 ...
- 文献阅读 - MonoLoco与关于Camera Matrix的笔记
目录 概览 HighLights Camera Intrinsic Matrix 笔记 Intrinsic Matrix Task-Error - 不确定性任务下确界的计算 输出假设的Laplace分 ...
- Floyd--P1119 灾后重建
题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...
- javascript面向对象编程的3种常见封装形式解析
javascript如何才能脱离函数式编程,拥抱面向对象编程呢,常见的有3种形式,其它形式可以说都是这3种的变种. 1.直接定义对象直接量的形式 var Util={ getType: ...
- 转： 十大Intellij IDEA快捷键
Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱,想排出个理想的榜单还真是困难.以前也整理过Intellij的快捷键,这次就按 ...
- pyCharm中设置查看运行过程中的变量实时情况
1.点击运行栏的这个灰色向下剪头: 2.单击“Edit Configurations”, 3.在出现的窗口上,勾选上:“Show command line afterwards” 或 “run wit ...