CSS学习2_基础样式属性

CSS学习2_基础样式属性

字体样式

font-size字号大小

em	相当于当前对象内文本的字体尺寸
px	像素

font-family:字体

p{ font-family:"微软雅黑";}

font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

 

外观属性

color:文本颜色

设定方式

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

line-height:行间距

常用的属性值单位有三种，分别为像素px，相对值em和百分比%

text-align:水平对齐方式

left：左对齐（默认值）right：右对齐 center：居中对齐

text-decoration 文本的装饰

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线 也是我们链接自带的
overline	定义文本上的一条线。

 

display属性

规定元素应该生成的框的类型。

块级元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素

不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

属性方法

块转行内：display:inline;

行内转块：display:block;

 

背景属性

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

Background-repeat:

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

background-position:

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。 position : 　top | center | bottom | left | center | right

background-attachment：

参数：

scroll : 　背景图像是随对象内容滚动 fixed : 　背景图像固定

其他

CSS层叠性

如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

2. 样式不冲突，不会层叠

css继承性

子标签会继承父标签的某些样式，如文本颜色和字号。