web前端 【CSS】 学习笔记
CSS中注释为:/*...*/
第一课 CSS引入方式
将CSS引入到HTML中可通过四种方式:
1 使用内敛样式(行内样式):将CSS定义具体HTML元素上,用于精确某个HTML元素表现,较少使用。
例: <html><head><title>xxx</title></head><body>
<p style="xxx:xxx;yyy:yyy;">内容</p>
</body></html>
2 使用内部样式定义(内嵌样式):在某一HTML文档头部定义样式单来实现,用于控制这一份HTML文档,较多使用。
例: <html><head><title>xxx</title>
<style type="text/css"> #此为固定样式。
p { xxx:xxx; yyy:yyy }
</head><body>
<p>内容1</p>
<p>内容2</p>
</body></html>
3 链接外部样式文件(LINK):将CSS样式文件单独创建,HTML需要将该样式引入,可控制多分HTML文档,最常使用。
例:
一、创建 x.css 文件
h2 { xxx:xxx; yyy:yyy }
p { xxx:xxx; yyy:yyy }
二、HTML文件引入.css文件
<html><head><title>xxx</title>
<link href="x.css" type="text/css" rel="stylesheet"> #引用标签 没有"/"
</head><body>
<h2>标题...</h2><p>内容...</p>
</body></html>
4 导入外部样式文件(import):与第三种类似,使用@import引入外部样式文件。
例:
一、创建 x.css 文件
h2 { xxx:xxx; yyy:yyy }
p { xxx:xxx; yyy:yyy }
二、HTML文件引入.css文件
<html><head><title>xxx</title>
<style type="text/css">
@import url("x.css"); #或直接用 @import "x.css"
</style>
</head><body>
<h2>标题...</h2><p>内容...</p>
</body></html>
注释:四种CSS引入方式的优先级问题: 【 内联 > 内嵌 > import > link 】
第二课 CSS常用选择器
语法
Selector { # 选择器,决定该样式定义作用在哪些元素上(如p,h1,div等)。
property:value1; #属性定义 决定该样式起何种作用(如颜色,字体等)
property:value2;
}
标记选择器(元素选择器)
E{……} #E代表有效的HTML元素。该标记选择器需要在<head><style>中。
类选择器
[E].classvalue{……} #同上
例:
<html><head><title>abc</title><style>
.one{ xxx:xxx;yyy:yyy;} #未指定类型,可作用于任何元素。
div.two{ xxx:xxx;yyy:yyy;} #指定div类型,故只可以在div标签中使用。
</style><head><body>
<p class="one">正文内容...</p>
<div class="one two">正文内容...</div> #该标签中one,two功能叠加。
</body></html>
ID选择器
[E]#idvalue{……} #value为该选择器命名。
例:(与class雷同,但选择性唯一,不支持功能叠加。)
<html><head><title>abc</title><style>
#one{ xxx:xxx;yyy:yyy;} #未指定类型,可作用于任何元素。
div#two{ xxx:xxx;yyy:yyy;} #指定div类型,故只可以在div标签中使用。
</style><head><body>
<p id="one">正文内容...</p>
<div id="two">正文内容...</div>
</body></html>
选择器组合
Selector1,Selector2 {……} #其中Selector都是有效选择器。
例:
h1,h2,h3,p { xxx:xxx;yyy:yyy;} #前述标签共享该效果。
h2.abc,.abc,#one { xxx:xxx;yyy:yyy;} #类选择器,ID选择器,均可组合共享该效果。
<body>
<h1>标题...</h1> #效果直接被第一个集合定义。
<h2 class="abc">标题...</h2> #引用第二个集合中的类选择器。
<p id="one">正文...</p> #引用第二个集合中的ID选择器。
选择器嵌套(用于某个标签中的另一个标签,类选择器和ID选择器均可使用)
Selector1 Selector2 {……} #其中Selector都是有效选择器。选择器组合用“,”隔开,嵌套用“空格”。
例:
p b { xxx:yyy;}
<body><p><b>嵌套选择器</b>使用方法</p> #此元素“嵌套选择器”会应用选择器效果。
<b>嵌套之外不生效</b> #此标签未在嵌套的<p>标签内,故不会有选择器效果。
第三课 CSS字体和文本相关属性
常用字体属性:
· font-family #规定文本字体系列,如黑体,宋体等(多个字体可用“,”隔开,如浏览器查不到第一个会用第二个)。
· font-size #规定文本字体尺寸。
· font-style #规定文本字体样式,主要有noraml(正常),italic(斜体部分不支持),oblique(斜体)。
· font-weight #规定文本字体粗细,主要有normal,bold等。
常用文本属性:
· color #字体颜色
· letter-spacing #字符间距(px像素)
· line-height #文本行高
· text-align #文本对其方式,有leift、right、center。
· text-decoration #文本装饰效果,主要有overline(上划线)、underline(下划线)、line-through(删除线)。
` text-indent #是文本块首行缩进(px像素)
· text-transform #文本大小写,主要有uppercase(大写)、lowercase(小写)、capitalize(首字大写)。
· word-spacing #单词间距(px像素)
第四课 CSS边框和背景相关属性
常用边框属性:
· border #设置所有边框
· border-width #设置四条边框宽度
· border-style #设置四条边框样式,主要有dotted(点划线)、solid(实心线)、double(双划线)、dashed(虚线)。
· border-color #设置四条边框颜色
· border-left(right、top、bottom) #设置所有左边框(右边框、上边框、下边框)属性
· border-left-color(style、width) #设置左边框颜色、样式、宽度。
例:
<style>
img.test1 { border : 5px double #FF00FF; } #简化代码量的写法也可实现边框宽度,样式,颜色的设置。
img.test2 { border-left : 5px double #FF00FF; } #其他边框亦如此。
</style>
常用背景属性:
· background #设置全部背景属性。
· background-attachment #设置背景头像是否固定或随页面其余部分滚动。两个值fixed(固定),scroll(滚动)。
· background-color #设置元素背景颜色。
· background-image #设置元素背景图像。主要有url(xx.jpg)和none两个属性。
· background-position #设置背景图像开始位置。可指定top、left等,也可指定具体像素100px 25px或百分比号20% 50%。
· background-repeat #设置是否及如何重复背景图像。主要有repeat(平铺该图片)、repeat-x(平铺水平方向)、repeat-y(平铺垂直方向)、no-repeat(不重复平铺)。
例:
<style>
body { background:url(xxx.jpg) no-repeat 200px 25px } #亦可像常用边框简化代码量。
body.text { background-position:30% 50% } #正常代码输入类型。
</style>
第五课 CSS列表和表格相关属性
列表常用属性:
· list-style #在一个声明中设置所有列表属性。
· list-style-image #将图像设置为列表项标记。主要有URL值:list-style-image:url("xxx.jpg")。
· list-style-position #设置列表项标记放置位置,主要有outside和inside。
· list-style-type #设置列表项标记类型,主要有disc、circle、square、decimal、decimal-leading-zero、
lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、
georgian、none等。不能和list-style-image同时出现。
例:
list-style:url( "xxx.jpg" outside ) #可讲属性合并显示,减少代码量。
表格相关属性:
· border-collapse #设置是否吧表格边框合并为单一边框,值为collapse。
· border-spacing #设置分隔单元格边框距离。
· caption-side #设置表格标题位置。可选上下,top、bottom。
· empty-cells #设置是否显示报各种的空单元格,值为hide。
第六课 CSS常用 伪类别属性
对<a>标签提供相关克制动态效果的CSS伪类别属性常用属性:
· a:link #普通超链接样式
· a:visited #被点击过的超链接样式
· a:hover #鼠标指针经过超链接样式
· a:active #在超链接上单击时样式,既"当前 **"(单击不放开时的样式)。
第七课 盒子模型
盒子就是一个块级标签的描述,其中有content(内容)、padding(内边距)、border(边框)和margin(外边距)组成。分别设定四条边各自的border、padding、margin即可实现各种样式的排版效果。
border属性:
主要有三个属性进行配合从而达到良好的效果,分别是border-color(颜色)、border-width(边框宽度)、border-style(类型)。
padding属性:
padding用于控制content与border之间的距离,四个方向为padding-top(bottom、left、right)。
padding也可以用组合写法如:
padding:10px 10px 10px 10px (数值为顺时针方向,既上右下左)
padding:10px (指4个方向都为此数值)
margin属性:
margin指元素与元素的距离。四方向为margin-top(bottom、left、right)。
margin两个行级标签的距离为中间的和,而两个块级标签之间距离为两者间较大的一个值。
margin可以设置为负数,会使得块向反方向移动,甚至覆盖另外的标签上,当存在父子关系,可设置负数使得子块“分离”出父块。
元素定位
可使用CSS的float、position和z-index属性来进行块元素定位。
float属性:
float定位是CSS排版中重要手段。属性可设置为left、right或默认值none,当设置元素左右浮动时,会向父元素左右侧靠近。
clear属性
设定此属性清除float的影响,主要设置以下三个值:left、right、both。
position属性:
此为定制块的位置,既定制其在父块中的位置。
当设置为absolute时,子块将不在属于父块,其位置会相对于<body>标签设定,而非父块。
例:
position:absolute;left:30px;top:50px;(30和50是相对于<body>的边距)
当设置为relative时,子块将相对于在父块原位置进行定位。
z-index属性:
当块设置了position属性后,该属性便可设置各块之间重叠关系,默认值为0。
第八课 DIV+CSS布局实战
CSS排版是一种流行的排版理念,将页面进行<div>标记分块,然后对各块进行CSS定位,最后在块中添加响应内容。这样排版页面更新容易,甚至页面拓扑结构,都可通过修改CSS属性来重新定位。