CSS笔记-常用属性

JessieLi
67 阅读6分钟

文本相关属性

text-align

控制文本如何和它所在的内容盒子对齐

  • 设置元素内容在元素中水平对齐方式
  • 文本可居中或对齐到左或对齐到右,两端对齐
h1 {text-align:center;}

text-decoration

文本修饰， 用来设置或删除文本的装饰。 缩写属性包括

  • text-decoration-line ： 修饰线
  • text-decoration-style： 修饰线样式
  • text-decoration-color： 修饰线颜色
  • text-decoration-thickness： 修饰线粗细
// none：无装饰线
h3 {
	/*红色、波点、1px宽的下划线*/
  text-decoration: underline red dashed 1px;
}

text-tranform

文本转换。用来指定在一个文本中的大写和小写字母。

//  全部大写
p.uppercase {
	text-transform:uppercase;
} 
// 全部小写
p.lowercase {
	text-transform:lowercase;
} 
// 首字母大写
p.capitalize {
	text-transform:capitalize;
}
// 无变化 
p.none {
	text-transform:none;
}

text-indent

文本缩进:设置第一行内容缩进

p {
	text-indent:50px;
}

letter-spacing

设置字母之间间距

h1 {
	letter-spacing:2px;
}

word-spacing

设置单词之间间距

h1 {
	word-spacing:2px;
}

text-shadow

用于给文字添加阴影效果

  • 设置水平偏移量
  • 设置垂直偏移量
  • 设置模糊半径
  • 设置阴影的基础颜色
h3 {
 text-shadow: 10px 10px 5px #000;
}

字体相关属性

font-family

设置文本的字体系列

  • 为了防止设置的字体刚好操作系统不存在，设置多个字体从左向右寻找字体
  • 一般情况下英文只适用于英文，中文字体适用于中+英
  • 希望中英文适用不同字体，先写英文字体后写中文字体
p{
	font-family:"Times New Roman", Times, serif;
}

font-size

设置文字大小

// 具体数字+单位： 10px/2em/1rem
 h1 {
	font-size:40px;
} 
// 40px/16=2.5em 
h1 {
	font-size:2.5em;
} 
// 百分比： 相对于父元素 
body {
	font-size:100%;
}

font-style

主要是用于指定斜体文字的字体样式属性

  • normal：正常显示
  • italic: 字体斜体显示（字体支持斜体）
  • oblique：文本倾斜显示
//  normal：正常显示
p.normal {
	font-style:normal;
} 
//  italic: 字体斜体显示（字体支持斜体）
p.italic {	
	font-style:italic;
} 
// oblique：文本倾斜显示（让文字倾斜）[i元素经常使用于小图标而非斜体]
p.oblique {
	font-style:oblique;
}

font-weight

设置文字加粗, 100~900每一个数字表示一个重量。

//  normal： 等于400p
p.normal {
	font-weight:normal;
}
//  bold：等于700p
.thick {
	font-weight:bold;
} 
.thicker {
	font-weight:900;
}

line-height

设置文本每行之间的高，简单理解为一行文本所占据的高度。 8721b054-42d2-4cf7-bba1-e5d89b8ebc30.png

  • 严格定义：两行文字基线（baseline）之间的间距
  • 基线：与小写字母x最底部对齐的线
  • 行距：把文本去掉后的间距
  • 应用最多为文本垂直方向居中

font

缩写属性 font-style font-variant font-weight font-size/line-height font-family的缩写。

  • font-size font-family 不可以换顺序，不可以省略
  • font-style font-variant font-weight 可以任意调换顺序或省略
  • /line-height 可以省略，如不省略必须跟在font-size后面
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

颜色

color

color 属性设置选中元素的前景内容的颜色。

  • 通常指文本（也可以包括一些其他东西）
  • text-decoration 属性放置在文本的线
p {
	color: red;
}

backgroud-color

backgroud-color 属性设置选中元素的背景的颜色。

p {
	backgroud-color: red;
}

背景相关属性

background-color

定义了元素的背景颜色

body {
	background-color:#b0c4de;
}

background-image

描述了元素的背景图像。

  • 默认背景图像进行平铺重复显示
  • 覆盖整个元素实体（会盖在background—color上面）
  • 如果设置了多张图，设置的第一张图片显示在最上面，其他按顺序层叠在下面
body { 
	background-image:url(‘bgdesert.jpg’);
}

background-repeat

描述了元素的背景图像的平铺效果

// repeat： 平铺/ repeat-x：横向平铺/ repeat-y：纵向平铺 no-repeat：不平铺
body {
	background-image:url(‘gradient2.png’);background-repeat:repeat-x;
}

background-size

用于设置背景图片的大小

div {    
	background:url(img_flwr.gif);  
	// 具体大小  
	background-size:80px 60px;  
	background-size: 300px; 
	// 以背景本身大小显示(默认)    
	background-size:auto;
	// 对背景图片进行拉伸，让背景图片覆盖整个元素       
	background-size:cover;  
	// 对背景图片进行拉伸，拉伸到一个方向的宽度（高度）不再拉伸。保持图片宽高比   
	background-size:contain; 
	// 百分比，相对于背景区域 background-size: 30% 50%;       
	background-size:30%;   
	background-repeat:no-repeat;
}

background-position

用于设置背景图片在水平、垂直方向的位置

  • 水平方向： left、center、right
  • 垂直方向： top、center、bottom
  • 具体数值： background-position: 30px 50px;
body {
		background-image:url(‘img_tree.png’);
		background-repeat:no-repeat;
		background-position:right top;
}

CSS Sprite(雪碧图)：一种CSS图像合成技术，将各种小图片合并到一张图上，然后利用CSS的背景定位来显示对应图片部分。

  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
  • 减小图片总大小

background-attachment

  • scroll: 背景图片跟随元素一起滚动（默认）
  • local: 背景图片跟随元素以及元素内容一起滚动
  • fixed: 背景图片相对于浏览器窗口固定

background-clip

背景剪裁属性是从指定位置开始绘制

#example1 { 
	border: 10px dotted black; 
	padding: 35px; 
	background: yellow; 
	background-clip: content-box; 
}

background

background一系列背景相关属性的简写属性，常用格式为 image position/size repeat attachment color其中：

  • size: 可以省略，如果不省略在position后面
  • 其他属性都可以省略，顺序任意

元素效果相关属性

word-break

指定是否能在单词内部换行

h1 {
	word-break: normal;
	word-break: break-all;
	word-break: keep-all;
  word-break: break-word;
}

opacity

图像透明/不透明

img {  
	/* IE8 及其更早版本 */
	opacity:0.4;  filter:alpha(opacity=40); 
}

圆角效果

可以根据每一个角落单独设置，一般设置一个值（可设置两个值）

  • 百分比是参考当前元素的border+padding+width
box {
  border-radius: 5px;
	border-radius:50%;
}

元素阴影效果

box-shadow属性用于在元素的框架上添加阴影效果。

  • 可以设置一个或者多个阴影; 多个阴影之间用逗号隔开，从前到后叠加
  • 第一个: 水平方向偏移
  • 第二个: 垂直方向偏移
  • 第三个: 模糊半径(blur radius)
  • 第四个:阴影扩散半径
  • 阴影的颜色: 如果没有设置，就跟随color属性的样色
  • inset： 外框阴影变成内框阴影（可选）
div { 
	/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

渐变

渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变（Linear Gradients）

向下/向上/向左/向右/对角方向

#grad {    
	background-image: linear-gradient(#e66465, #9198e5); /*从上到下（默认）*/    
	background-image: linear-gradient(to right, red , yellow); /*从左到右*/    
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*带透明度*/
}

径向渐变（Radial Gradients）

由它们的中心定义

background-image: radial-gradient(shape size at position, start-color, …, last-color);
#grad {  background-image: radial-gradient(red, yellow, green);}
avatar
文章
阅读
粉丝