HTML5教程

Web前端开发【四】CSS总结

本文主要是介绍Web前端开发【四】CSS总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. CSS,指的是“Cascading Style Sheet(层叠样式表)”,是用来控制网页外观的一门技术。

2. CSS引入方式:

  • 外部样式表<link rel="stylesheet" type="text/css" href="文件路径" />
  • 内部样式表<style type="text/css"> …… </style>
  • 行内样式表

说明:内部样式表的CSS是在“style标签”内定义的,而行内样式表的CSS是在“标签的style属性”中定义的。

3.元素的id和class
id只允许出现一次,而class允许出现多次。(id就像你的身份证号,而class就像你的名字)

4. CSS选择器(常用):
语法:
选择器 { 属性1 : 取值1; …… 属性n : 取值n; }

  • 元素选择器:div{……}
  • id选择器:#box{……}
  • class选择器:.box{……}
  • 后代选择器:father div{……}
  • 群组选择器:h3,p{……}

5. 字体样式:

属性说明
font-family字体类型
font-size字体大小
font-weight字体粗细
color字体颜色

说明

  • font-family属性如果不指定字体,则会采用浏览器默认字体(即宋体)来显示。如果指定多种字体,则多个字体将按从左到右的优先顺序生效;在实际开发中,常用的中文字体有微软雅黑、宋体,常用的英文字体有**"Times New Roman "、Arial、Verdana**;
  • font-size属性取值一般是“像素值”,不会采用“关键字”。在实际开发中,常用字体大小为12px、14px,很少用13px、15px等。
    -font-weight属性 在实际开发中,我们只会用到“font-weight:bold;”这一个属性值,其他的几乎用不上。
    -color属性取值有2种,一种是关键字,如red、green、blue等;另外一种是“16进制RGB值”,如#EEEEEE、#FBF9D0等。

6. CSS注释

/* 注释的内容 */

7.文本样式:

属性说明
text-indent首行缩进
text-align水平对齐
text-decoration文本修饰
line-height行高
text-transform大小写
letter-apacing、word-spacing字母间距、词间距

说明

  • text-indent属性技巧:想要实现段落首行缩进2个汉字的距离,text-indent值应该是font-size值的2倍
  • text-align属性取值有left,center,right
  • text-decoration属性取值有none(去除所有划线效果,默认),underline(下划线) ,line-through(中划线),overline(顶划线)。“text-decoration:none;”一般用于去除a元素的下划线
  • line-height属性用来控制一行文本的高度
  • 一般来说,text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上

8. 边框样式:

属性说明
border-width边框宽度
border-style边框外观
border-color边框颜色

边框的简写形式border:1px solid red;
局部边框样式:border-top(上边框),border-bottom(下边框),border-left(左边框),border-right(右边框)。
技巧:去除某一条边框(3种写法)
border-bottom:0px\0\none;

9. 列表样式:

属性说明
list-style-type定义列表项符号
list-style-image定义列表项图片

说明

  • list-style-type属性是针对ol或者ul元素的,而不是li元素
  • 在实际开发中,我们一般用“list-style-type:none;”来去除列表项符号。(经常用)
  • 列表项图片语法:list-style-image:url(图片路径); 在实际开发中,对于列表项图标,更多的是使用“字体图标iconfont”来实现,而不是list-style-image属性。

10. 表格样式:

属性说明
caption-side表格标题位置(top、bottom)
border-collapse表格边框合并(separate、collapse)
border-spacing表格边框间距(像素值)

说明:一般情况下我们都只在table元素中定义caption-side、border-collapse、border-spacing。

11. 图片样式:

属性说明
width定义图片的宽度
height定义图片的高度
border定义图片的边框
text-align定义图片水平对齐方式 (left、center、right)
vertical-align定义图片垂直对齐方式(top、middle、baseline、bottom)
float定义文字环绕效果(left、right)

12. 背景样式:

属性说明
background-color定义背景颜色
background-image定义背景图片样式
background-repeat定义背景图片重复
background-position定义背景图片位置
background-attachment定义背景图片固定(scroll、fixed,几乎用不上)

说明

  • background-image语法:background-image: url(图片路径);
  • background-repeat取值有repeat(两个方向同时平铺,默认)、repeat-x(只在水平方向平铺)、repeat-y(只在垂直方向平铺)、no-repeat(不平铺)
  • 在实际开发中,background-position一般用于实现CSS Spirit(精灵图片)

14. 超链接样式:
(1)超链接伪类

伪类说明
a:link定义a元素未访问时的样式
a:visited定义a元素访问后的样式
a:hover定义鼠标经过a元素时的样式
a:active定义鼠标点击激活时的样式

说明:对于超链接伪类来说,我们只会用到2种状态:未访问时状态和鼠标经过状态a{……} a:hover{……}

(2):hover伪类:可以定义任何一个元素在鼠标经过时的样式!注意,是任何元素!应用非常广泛,任何一个网站都会大量用到它,需要重点掌握。

(3)鼠标样式

  • 浏览器鼠标样式:cursor:取值;,在实际开发中,我们一般只会用到default(默认)、pointertext这三个取值。
  • 自定义鼠标样式:cursor: url(图片地址), 属性值;,其中鼠标图片后缀名一般都是**.cur**,可以使用Photoshop来制作。

15. 盒子模型:
(1)CSS盒子模型的组成部分

属性说明
content内容,可以是文本或图片
padding内边距,用于定义内容与边框之间的距离
margin外边距,用于定义当前元素与其他元素之间的距离
border边框,用于定义元素的边框

说明:所有的元素都可以视为一个盒子,盒子模型是由内容区(content)、内边距(padding)、边框(border)以及外边距(margin)4大部分组成。

(2)宽高:元素的宽度(width)和高度(height)是针对内容区而言的。只有块元素才可以设置width和height,行内元素是无法设置width和height的。

(3)内边框(padding)与外边框(margin)

  • 局部样式:
padding\margin-top: 像素值;
padding\margin-right: 像素值;
padding\margin-bottom: 像素值;
padding\margin-left: 像素值;

  • 简写形式
padding\margin:像素值;
padding\margin:像素值1 像素值2;
padding\margin:像素值1 像素值2 像素值3 像素值4;
  • 区别:padding体现的是元素的“内部结构”,而margin体现的是元素之间的相互关系。

16. 正常文档流与脱离文档流:
(1)正常文档流,又称为“普通文档流”或“普通流”,是指将一个页面从上到下分为一行一行,其中块元素独占一行,相邻行内元素在每一行中按照从左到右排列直到该行排满。
(2)脱离文档流,指的是脱离正常文档流。如果我们想要改变正常文档流,可以使用2种方法:浮动和定位

17. 浮动布局:
(1) float属性取值:

属性值说明
left元素向左浮动
**right**元素向右浮动

(2)浮动最常用于实现水平方向上的并排布局,例如两列布局、多列布局。
(3)清除浮动clear:both;,清除该元素的兄弟元素浮动之后带来的影响。我们一般都是在浮动元素后面再增加一个空元素,然后为这个空元素定义“clear:both;”来清除浮动。

18.定位布局:
(1)position属性取值

属性值说明
fixed固定定位
relative相对定位
absolute绝对定位
static静态定位(默认值),了解即可

(2)说明

  • top、bottom、left和right这四个属性不一定全部都用到,一般只会用到其中两个。
  • 默认情况下,固定定位和绝对定位的位置是相对于浏览器而言,而相对定位的位置是相对原始位置而言。
这篇关于Web前端开发【四】CSS总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!