CSS(Cascading Style Sheets)美化样式
三种写法:
1.内部样式表
2.行内样式表(内联样式)
3.外部样式表(外链式)
行内样式表:
style="color=pink; font-size:15px;" //color控制其颜色(以后默认的灰色用#ccc),font-size修改字号大小
内部样式表:
卸载文件的头标签中,一般写在title标签后(书写规范),也可以写在任意位置
语法格式:
<head>
<style type="text/css">
选择器 1 {属性1:值;属性2:值;属性3:值;}
选择器2 {属性1:值;属性2:值;属性3:值;}
选择器 3 {属性1:值;属性2:值;属性3:值;}
/style>
</head>
外部样式表(外链式)(重点)
外链式样式表是把所有的样式写在另外的一个css中,后HTML通过link标签把css链入进来。它的语法格式是:
注意:link是个单标签,放在头标签中且需要写三个属性:
herf:定义所链接外部样式表文件的URL,可以是相对路径也可以是绝对路径;
rel:定义当前文档与被链接文档之间的关系,这里指定为stylesheet,表明被链接的是一个样式表;
type(可省略):定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
三种样式表总结(位置)
自学日记第三天2019.8.29
1、明白CSS如何控制样式(可以自主做出新闻的综合案例)
2、学会画盒子,彻底明白标签就是盒子容器的概念(借助a伪类能完成导航案例)
选择器(重点):
标签选择器(元素选择器):能把一类的标签全部选出来;
类选择器:格式:上面(头标签)点声明,下面(body)class调用
语法格式:
多类名选择器
语法格式:
.a{属性:值;}
.b{属性:值;}
<body>
<div class="a b">blabla</ div>
</ body>
注:
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。
id选择器:
基本语法:
#定义,id调用
类似于类选择器。类选择器可以使用多次,但是id选择器只能使用一次
通配符选择器(使用较少)
用*表示,*代表所有标签的意思
通配符:
*:所有
?:一个字符
CSS的 字体样式属性
**font-size:**设置字号大小,一定要记住带单位
font-family:设置字体
网页中常用的字体有宋体、微软雅黑等,语法格式为:
*{font-family:“宋体”; }
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器如果不支持第一个字体,则会尝试下一个,直到找到合适的字体。
常用技巧
1、现在网页中普遍使用14px+;
2、尽量使用偶数的数字字号。ie6等老式浏览器奇数会有bug;
3、各种字体之间必须使用英文状态下的逗号隔开;
4、中文字体需要加英文状态下的引号,英文字体一班不需要加引号。当需要设置英文字体时,英文字体必须位于中文字体名之前;
5、如果字体包含==空格、#、$==等符号,则改字体必须加英文状态下的单引号或双引号,例如font-family:“Times New Roman”;;
6、尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
Unicode字体
在文件编码不匹配时会产生乱码的错误,为了避免这种错误,有时候我们采用Unicode编码来写字体名称
font-weight:控制字体粗细
字体加粗除了用b和strong标签之外,可以使用CSS来实现,但是CSS是没有语义的。
其属性值有:normal、bold、bolder、lighter、100~900(100的整数倍)。
注:数字400等价于normal,而700等价于bold。我们一般喜欢用数字。
font-style:字体风格
属性值:normal、italic(斜体)、oblique(基本不用了)
字体连写
可以对font属性进行综合设置,但是属性顺序不能换,没有的可以不写,但是有两个属性必须要写:font-size;fant-family;其基本语法格式如下:
选择器{ font: font-style font-weight font-size/line-height font-family; }
CSS外观样式
color:文本颜色,其取值方式有以下3种:
1.预定义的颜色值,如red,green,blue等。
2.十六进制,如#FF0000,#FF6600,#29D794等(按照红绿蓝三种颜色排放#rrggbb,例如#FF0000就是红色[ff红最大00绿没有bb蓝也没有])。实际工作中,十六进制是最常用的定义颜色的方式。
3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
line-height行间距
语法格式:line-height:28px;
单位有px,em,%,实际工作中用的最多的就是px。一般情况下,行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
属性值:left/right/center
**text-indent:**段落首行缩进
单位:em
语法格式:
text-indent:2em;
一个em表示一个字节
text-decoration 文本修饰
属性值:
none:取消修饰;
underline:下划线;
line-through:删除线;
开发者工具:
Chrome中点击F12可以进入开发者工具模块,在里面点击任何东西
左边是HTML元素结构,右边是CSS样式;
Ctrl+滚轮可以放大代码;
右边CSS样式可以改动数值和颜色查看更改后效果
复合选择器
后代选择器(重点)
用空格隔开,选取子孙后代
语法格式:
<head>
XX1 XX2 { }
</head>
<body>
<XX1>
<XX2>
</XX2>
</XX1>
</body>
子代选择器
用>隔开,仅选择亲儿子
子代选择器,子指的是亲儿子,大于号分割,此时的a一定是li的亲儿子;
后代选择器 所有的后代的意思 用的最多。
交集选择器
div.a{} //既是div又是a标签时才使用;符号用"."隔开
并集选择器()重点
div,p,span,h1{} //以上标签集体声明相同样式;符号用","号隔开
伪类选择器
符号为":"
属性值:
:link //未访问的链接
:visited //已访问的链接
:hover //鼠标移动到链接上
:active //选定的链接
注意:书写时,顺序不能变 ||记忆法:lv hao
实际开发中,直接写类的属性,之后再写hover,其他几个基本不写;
几个Sublime的快捷键
1、生成标签,直接输入标签名,按Tab键即可
2、如果想生成多个相同的标签,在后面加上就可以了,比如div3+Tab就可以生成3个div
3、如果有父子级关系的标签,可以用>,比如ul>li就可以自动生成一个无序列表
4、如果有兄弟关系(即同级)标签,用+就可以了;
5、如果生成带有类名或者带id名字的,直接写.demo或者#two+Tab键就可以了
标签显示模式
块级元素(block-level):每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。 可以通过line-height=height使文本居中
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
等,其中<div>
标签是最典型的块元素。
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
行内元素(inline-level):行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
等,其中<span>
标签最典型的行内元素。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。(a特殊)
注意:
1、只有 文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
2、链接里面不能再放链接。
行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />、<td>
,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
注意:
1、行内元素只能放行内元素或文字;
2、块级元素既能放块级元素又能放行内元素;
3、但是<p><h1><dt> 元素除外
他们都是文字标签里面不能放其他块级元素;
4、链接里面不能再放链接;
5、a里面可以放块级元素。
行内元素、行内块元素我们可以看成是文本,可以让盒子居中对齐;
CSS书写规范
开始就形成良好的书写规范,是你专业化的开始。
空格规范
【强制】 选择器 与 { 之间必须包含空格。
示例: .selector { }
【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
示例:font-size: 12px;
选择器规范
【强制】 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
示例:
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建议】 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
属性规范
【强制】 属性定义必须另起一行。
示例:
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以分号结尾。
示例:
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
行高的测量
可以使用浏览器的检查看出该盒子的高宽
行高由四条线组成,分别是顶线、中线、基线和底线;一般测行高是测基线到基线的距离;
如果简化行高,可以分成上下距离和内容高度;盒子内元素的位置=(行高-元素高度)/2;这是其距离顶端的距离
如果行高等于height 高度 ,文字会垂直居中
如果行高大于高于,文字会偏下
如果行高小于高度,文字会偏上
行高会继承
CSS三大样式
1、层叠性
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准(即最靠近样式的)。
- 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
- 样式不冲突,不会层叠
2、继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(一般跟文本相关的都可以继承text-,font-,line-这些元素开头的都可以继承,以及color属性)
而height等不可继承;
3、优先级
继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
权重是可以叠加的、
div ul li -----> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
注意:
数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
继承的权重是 0 (即子元素要是有定义,则以自己的定义为准 ),*的权重为0,0,0,0
总结优先级:
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结:权重是优先级的算法,层叠是优先级的表现
CSS背景background
**background的几个属性值:**
1、background-color:背景颜色
2、background-image:背景图片地址
3、background-repeat:是否平铺
4、background-position:背景位置
5、background-attachment:背景固定还是滚动
背景的合写(复合属性):
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景图片:
background-image: url(图片地址);
背景是否平铺:
属性值:repeat(平铺); no-repeat(不平铺); repeat-x(横向平铺); repeat-y(纵向平铺)
background-repeat: repeat //系统默认平铺
背景位置:
background-position: X Y;
XY方位名词:top:上; bottom:下; left:左; right:右
//方位名词位置可以不管XY的顺序;如果只写一个方位名词,另一个则是默认居中的
XY还可以是值(px) //px一定要按XY顺序写,有顺序;如果只写一个,另外一个也是默认居中的
背景固定还是滚动:
background-attachement:scroll; //默认是滚动的
属性值:scroll(背景图像是随对象内容滚动);
fixed(背景图像固定);
背景半透明
background: rgba(0,0,0,0.6); //rgba:(red green blue alpha[value:0-1])
盒子模型(重点)
盒子边框(boder)
语法:boder:boder-width||boder-style||boder-color //缺一不可
盒子样式:boder-style():
none:无边框;
solid:实现边框;
dashed:虚线边框;
dotted:点线边框;
double:双实线 ;
盒子连写:
boder: 1px solid red; //宽度 样式 颜色
盒子四边线刻分开写:
boder-top/bottom/left/right:1px solid red;
表格的细线边框:
collapse单词是合并的意思;
boder-collapse:collapse表示相邻边框合并在一起。
内边距(padding):
给一下不适合规定宽度的元素增加宽度;
padding:上下左右内边距
padding-left/right:左右内边距;
左右连写:
padding: 0 XXpx; //上下内边距是0,左右内边距是XXpx
padding-top/botto:上/下内边距(少用)
外边距(margining)
给一个盒子增加外边距;
语法跟padding类似;
外边框实现盒子居中对齐
让一个盒子实现水平居中,需要满足以下两个条件:
1、必须是块级元素;
2、盒子必须指定了宽度(width)
然后给左右的外边距都设置为auto,就能使块级元素水平居中
margin: 0 auto; //通俗写法,盒子可以水平居中,即上下为0px,左右充满;
auto:充满;
margin-left: auto; //盒子左边充满
margin-right:auto; //盒子右边充满
盒子中内容对齐:text-align: center;
盒子外边距合并问题:
若是上面的盒子有个下外边距,下面的盒子有个上外边距,则最终两个盒子之间的距离以他们最大的外边距为准;
例如上面的盒子下外边距为100px,下面的盒子上外边距为50px,最终两盒子之间的距离为100px。
盒子嵌套元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
解决方案:
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。 //overflow:hidden(溢出隐藏)
padding不会撑开盒子的情况
当盒子给了定值,给盒子定padding会撑开盒子;
若盒子未给定值用默认大小,盒子给padding则不会撑开盒子。一般适用于有父集的子盒子
盒子圆角问题:
boder-radius: 10px; //像素越大就越圆,只有正方形能变成正圆
单位可以是px也可以是%;
也可是
boder-radius: 1px 2px 3px 4px;左上 右上 右下 左下;
boder-radius:1px 0px; 左上右下1px,右上左下0px;
一般变正圆的话就boder-radius: 50%;
盒子阴影(box-shadow):
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
box-shadow: 0 15px 30px rgba(0,0,0,0.1); //一般的阴影设置
浮动(float)
CSS的定位机制有3种:普通流(标准流)、浮动和定位
最早的浮动是用来控制图片,已达到其他元素(特别是文字)实现环绕图片的效果。
后来,我们发现浮动有个很有意思的事情:就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题,用浮动的特性来布局了。
属性值:
选择器 {float: 属性值;}
left:元素向左浮动;
right:元素向右浮动;
none:元素不浮动(默认)
浮动内幕特性:
1、只有左右浮动(左对齐右对齐)
2、浮动首先创建包含块的概念(包裹)。就是说, 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
3.一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。
4.元素添加浮动后,不管他是行内元素还是行内块元素或是块元素,都有大小宽高;
总结: 浮动 —>
浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的, 是否占有位置
float 浮 漏 特
浮: 加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面。
漏: 加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏 给了标准流的盒子。
特: 特别注意,首先浮动的盒子需要和标准流的父级搭配使用, 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
版心和布局流程
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:
1、确定页面的版心(可视区)。
2、分析页面中的行模块,以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清楚浮动的本质叫做闭合浮动,清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中,clear属性用于清除浮动,其基本语法格式如下:
选择器 {clear: 属性值;} clear 清除
属性值 描述
left 不允许左侧有浮动元素
right 不允许右侧有浮动元素
both 同时清除左右两侧浮动的影响 (用的最多)
清除浮动的四种方法
1、额外标签法:
通过浮动元素末尾添加一个空的标签,例如<div style="clear:both"> </div>
,或则其他标签br等亦可。
2、父级添加overflow属性方法
可以通过触发BFC的方式,实现清除浮动
可以给父级添加:overflow为hidden|auto|scroll都可以实现
3、伪元素清楚浮动
使用after伪元素清楚浮动
格式:选择器: after { }
.clearfix:after {
content: “”; //规定写法,意思:?
display: block; //伪元素属于行内元素,需要转换为块级元素
height: 0; //
clear: both; //清楚浮动
visibility: hidden; //
}
.clearfix {zoom: 1;} / IE6、7 专有 /一般要加
// ""只有ie6、ie7识别,其他浏览器直接跳过
4、双伪元素清除浮动
.clearfix:before, .clearfix:after {
content:"";
display:table;
/* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix: {*zoom: 1;}
定位
background-position //背景定位
定位主要用来做特效
元素的定位属性主要包括定位模式与边偏移两部分
边偏移:
也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等等
定位模式(定位的分类)
语法格式:选择器 {position: 属性值;}
几种属性值:
static: 静态定位(自动定位(默认定位方式))
relative: 相对定位(相对于其原文档流的位置进行定位)
absolute: 绝对定位(相对于其上一个已经定位的父元素进行定位)
fixed: 固定定位(相对于浏览器窗口进行定位)
static静态定位
唯一的用处就是取消定位:
position:static;
relative相对定位(以自己的基准)
- 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
- 其次,每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)
就是说,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。(相对定位不脱标)
如果说浮动的主要目的是 让多个块级元素一行显示,那么定位的主要价值就是 移动位置, 让盒子到我们想要的位置上去。
absolute绝对定位
若所有父元素都没有定位,以浏览器当前屏幕为准对齐(document文档)。
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
[注意] 如果文档可滚动,绝对定位元素会随着它滚动,因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。
注意: 绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。(类似于float)
子绝父相
浮动与绝对定位的区别:
浮动不能超出盒子与内边距,定位可以
在使用定位、浮动之后,margin: 0 auto;失效
那么如何实现在定位浮动之后实现水平垂直居中呢?
left: 50%; //水平左边居中
margin-left: -(半个盒子的像素)px; //使盒子水平居中
top: 50%; //竖直居中
margin-top: -(半个盒子的像素)px; //使盒子竖直居中
fixed固定定位(只以浏览器为准,不影响布局)
position: fixed;
脱标不占位置,不随着浏览器的滚动而滚动
(ie6等低版本浏览器不支持固定定位)
定位模式转换
浮动与定位(absolute/fixed)会将行内元素自动转换位行内块元素,行内块的宽度和高度跟内容有关系,因此比如行内元素如果添加了 绝对定位或者 固定定位后 浮动后,可以不用转换模式,直接给高度和宽度就可以了。
z-index(叠放次序)
只有有定位的元素才有z-index
- z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
- 如果取值相同,则根据书写顺序,后来居上。
- 后面数字一定不能加单位。
- 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。
四种定位的总结