CSS字体和文本样式
文字样式:
样式代码 | 文字样式 |
---|---|
font-family | 文字字体 |
font-size | 文字大小 |
color | 文字颜色 |
font-weight | 文字粗细 |
font-style | 文字样式 |
注意:
1)文字字体一般设置多个,中间用逗号隔开(英文字符),若含有中文字体名,用引号括起来。当网页进行解析时,会按顺序寻找,找到哪个用哪个,找不到就用浏览器默认字体。如:font-family:字体1,字体2,字体3···
2)绝对大小
(1)不设置字体大小时,默认为浏览器的默认值,一般为16px。字体大小单位除了百分比和px,还需要记住的几个:
字体单位 | 含义 |
---|---|
in | Inch英寸,1英寸=2.54cm |
cm | 厘米,1cm=0.394英寸 |
mm | 毫米,1mm=0.1cm |
pt | 磅,印刷的点数,72磅=1英寸 |
pc | pica,1pc=12pt |
(2)相对大小
em:相对于父元素的大小进行倍数的更改。
rem:相对于网页根元素的字体大小进行倍数的更改。
3)字体颜色属性值有很多种表达方式:
color:颜色名; color:red;
color:#六位十六进制数; color:#fab123;
color:rgb(a,b,c); color:rgb(255,255,0);
color:rgba(a,b,c,d); color:rgba(255,255,3,0.7);
其中abc分别为0~255之间的数字,而rgba中的d为透明度。十六进制数中不区分大小写。
文本样式
文本对齐方式:
1、text-align:元素水平对齐方式。left,right,center,justify分别为靠左靠右靠中间以及两端对齐。
该设置方式只对块级元素起作用。
2、vertical-align:设置元素垂直方式。baseline,top,bottom,middle等分别为基线对齐,顶端对齐,底端对齐,中线对齐。
该设置方式只对行元素和单元格元素起作用。
p{width:50%;margin:0 auto;} //文字居于网页中间举例
//单行文字水平居中
<style>
.warp{height:400px;width:100%;border:1px solid red;line-height:400px;text-align:center;} //文本在本行正中间显示要将行高与本行高度设置相同,一般浏览器有默认行高,为1.2em
</style>
//多行文字水平居中
<style>
.wrap{height:400px;width:100%;border:1px solid blue;display:table;}
.content{vertical-align:middle;display:table-cell;}
</style>
<body>
<div class="wrap">
<div class="content">
<h1>Welcome to my home!</h1>
<h2>兜兜家</h2>
</div>
</div>
</body>
行级元素和块级元素
块级元素:独占一行,主要有:<p>,<div>,<h1>~<h6>,<ul>,<ol>,<li>,<dl>,<dd>,<dt>
。块状元素的width,height,margin,padding都有效。text-align只对其起作用。
行内元素:又叫内联元素,在一行显示,一行填满才进入下一行,主要有:<span>,<a>,<img>,<input>
。内联元素的width和height属性无效,水平方向上的margin和padding有效,垂直方向上的margin和padding无效。vertical-align只对其起作用。
display属性:
1、display:none; //隐藏元素
2、display:inline;//将元素显示为内联元素
3、display:block;//将元素显示为块元素
4、display:inline-block;//将元素显示为行内块元素,呈现为内联元素,但具有块元素的属性。
<head>
<style>
.hidden{display:none;}
a:hover .hidden{display:inline;} //当鼠标悬停在链接上时,隐藏的字体出现。
</style>
</head>
<body>
<div>
<a href="#">百度<p class="hidden">百度一下</p></a>
</div>
</body>
元素在进行行块级元素转换时,默认有间隙,可通过设置父元素font-size=0;此时,子元素文字消失,给子元素文字单独设置大小即可。
伪类:
作用:主要用于向某类选择器添加特殊的效果。
语法:选择器:伪类{添加的样式}。伪类名对大小写不敏感。
伪类的种类:
1、链接伪类:
伪类 | 作用 |
---|---|
link | 未被访问状态 |
hover | 鼠标悬停状态 |
active | 激活状态 |
visited | 已访问状态 |
这四种状态最为常用,它们具有优先级顺序:
按照:link—hover—active—visited顺序才能完全执行。
例子:
//通过此链接可实现空链接的四种状态变化的呈现
<head>
<style type="text/css">
a:link{color:red;}
a:hover{color:green;}
a:active{color:blue;}
a:visited{color:yellow;}
</style>
</head>
<body>
<a href="#">空链接</a>
</body>
伪类还可以与css中的选择器结合起来:
<head>
<style type="text/css">
a.love:hover{color:red;} //当鼠标悬停在两个链接上时,只有我爱中国发生了颜色变化
</style>
</head>
<body>
<a class="love" href="#">我爱中国</a>
<a href="#">亲爱的母亲</a>
</body>
2、first-child伪类
这种伪类主要用于选择元素的第一个子元素。
这里用例子来说明:
//匹配父元素中的第一个子元素
<head>
<style>
body{font-size:16px;} //给网页中所有的文字设置大小为16px
div:first-child{font-size:30px;} //匹配第一个div中的所有元素,设置字体大小为30px;
div p:first-child{color:pink;} //匹配所有div中p中的第一个子元素,设置字体为粉红色;
div:first-child p{font-family:宋体;} //匹配第一个div中所有的p元素,设置字体为宋体
</style>
</head>
<body>
<div>
<p>从前有座山</p>
<p>山上有祖庙</p>
<p>庙里有个老和尚</p>
<span>还有一个小和尚</span>
</div>
<div>
<p>我是第二个div的第一个p</p>
<p>我是第二个div的第二个p</p>
</div>
</body>
其他还有多种伪类,这里不一一列举。
css浮动属性
float浮动属性:
其值主要有:right右浮动,left左浮动,none不操作,inherit继承。其浮动排列顺序按照代码书写顺序。
利用浮动属性可以实现文本环绕效果,给行内元素加浮动属性,默认其为块元素。浮动后元素依旧占据应占的文本空间。
塌陷问题:
当父元素在浮动的情况下,宽高属性为auto时,因为无法检测其长宽而导致父元素无法定位大小,高度消失。而其临近元素会发生异位的情况。
塌陷解决方法:
1)手动给父元素添加高度;
2)通过clear清除内部和外部浮动;clear:none/both;
3)给父元素设置overflow:hidden;属性,隐藏超出部分;
4)给父元素设置内间距。
元素定位
元素的定位主要用网页布局上。
position属性值 | 功能 |
---|---|
static | 默认 |
relative | 相对定位,属性值有:left,top,bottom,right |
absolute | 绝对定位,属性值有:left,top,bottom,right |
fixed | 固定定位,属性值有:left,top,bottom,right |
inherit | 继承 ,只继承形式,不继承数据 |
相对定位是相对于网页整体的左上角而言的。
绝对定位是相对与窗口定位的与网页总高度无关,若让绝对元素相对与父元素定位,元素就会在父元素内部上下左右移动及分层。
元素分层
利用z-index可设置元素叠加顺序,但这依赖于定位属性。
z-index越大,层级越高,越会覆盖层级低的元素,若其值为auto则不参与层级比较,为负值会被普通流的元素覆盖。且z-index的子元素会继承父元素的层级关系。
盒子模型
盒子模型的结构
在这里可以借用一下老师的图:盒子模型从外到内分别为:margin外边距,border边框,padding内边距,以及中间的元素。
中间元素
具有高和宽属性以及其他块级元素和替换元素属性。
边框
1、边框宽度:border-width:thin/medium/thick/长度值(px/em)
2、边框颜色:border-color:颜色/transparent(透明色)
3、边框样式:border-style:none无/dotted点状/dashed虚线/double双实线等。还可以通过border-left/right/bottom/top设置不同方向边框。
外边距
可以分别设置不同方向的外边距,默认情况下都有外边距,margin的值若为auto,会实现水平方向的居中显示效果。当相邻的元素都设置外边距,外边距会发生合并,合并后外边距高度取决于外边距高度最大值。
内边距
也可以分别设置不同方向的内边距。
padding:值1 值2;设置上下为值1,左右为值2
padding:值1 值2 值3;设置上为值1,左右为值2,下为值2
padding:值1, 值2 值3 值4;设置上为值1,右为值2,下为值3,左为值4;