CSS样式(二)

简介: CSS样式(二)

CSS样式

1.background

backgroud是简写属性,在一个声明中设置所有的背景属性;

<1>background-color:设置背景颜色属性

<2>background-postion:设置背景图片的位置

<3>background-size:设置背景图片的尺寸

<4>background-repeat:规定如何重复背景图片

<5>background-image:把图片设置为背景图片

background的使用:

任何元素都可以

body{

   /*背景颜色*/

   backgroud-color:#ffcc00;

   /*背景颜色,简写形式,一般企业级开发都是用该种方法*/

   backgroud:red ;

   /*里面双引号单引号没引号都可以,但是在刷个引号内部就要用单引号了,一般都用相对路径*/

   backgroud-image:url("images/1.gif");

   /*背景图片简写形式,一般企业级开发都会使用此方式*/

   backgroud:url(images/mv.jpg);

   /*默认值是repeapt,设置不重复在平铺的时候就不会因为铺不满而重复填充*/

   backgroud-repeat: no-repeat;

   /*横向平铺*/

   backgroud-repeat: repeat-x;

   /*纵向平铺*/

   backgroud-repeat: repeat-y;

   /*背景图片的位置*/

   backgroud-postion: top left;

   backgroud-postion: top center;

   backgroud-postion: top right;

   backgroud-postion: center left;

   backgroud-postion: center center;

   backgroud-postion: center right;

   backgroud-postion: bottom left;

   backgroud-postion: bottom center;

   backgroud-postion: bottom right;

   /*背景图片的百分比形式 : 水平百分比,垂直百分比*/

   backgroud-postion:80%,40%;

   /*背景图片位置的数值形式,水平,垂直,单位像素*/

   backgroud-postion: 20px 100px;

   /*backgroud-size 真实项目中不会放到body里,body的高度和宽度是根据浏览器所定的*/

   body{backgroud:url("images/bg.jpg"); no-repeat; backgroud-size:cover}

   /*背景图像企业级应用方式,有时会拆开写,比如公共元素*/

   backgroud:url("images/mv.jpg") no-repeat 200px 100px;

}

2018122814580746.png

2018122814580746.png

2.CSS文本

css文本属性定义文本的外观

<1>color,背景

<backgroud-color>

<2>字符间距

letter-spacing: 20px;letter-spacing: -0.5em

/*字符间距*/

   letter-spacing:10px;    

   letter-spacing:10em;

em与px的换算关系 1em = ?px ,取决于字体大小,1em=字体大小的像素值,1em=(font-size)px;可以使用google浏览器调试

<3>行间距

像素值和百分比都可以,还可以是整数不带单位

line-height: 30px;(常用,比较精准)

line-height: 200%;

line-height: 2;

<4>对齐文本

text-align:center居中对齐  right向右对齐 left向左对齐(默认值) 仅对文本生效,控制容器里的文字

line-height: 60px;

font-size: 30px;

.align{

   /*对齐文本*/

   border:1px solid red;

   text-align:center;    

}

<p class="align">hello</p>p标签默认占据一行

<5>装饰文本

text-decoration

.text{text-decoration:underline} 添加下划线

2018122814580746.png

<5>文本缩进

text-indent (将段落的第一行进行缩进)

2018122814580746.png

<6>控制文本中的字母

text-transform

2018122814580746.png

<7> 文本属性

文本大小:font-size: 文本字体系列:font-family: 文本字体风格:font-style(normal、italic、oblique)

2018122814580746.png

font-weight 设置文字的粗细

2018122814580746.png

3.css表格样式

CSS 表格样式:

<1> 表格边框(border) ;

<2> 折叠边框(border-collapse:collapse;);

<3> 表格宽度和高度 (width ,height);

<4> 表格文本对齐(text-align);

<5> 表格内边距 (padding);

<6> 表格颜色 ;


相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
32 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
3月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
29 0
|
15天前
|
前端开发
|
18天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
22天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
21 9
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
23 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式