CSS入门学习

CSS入门学习

一、CSS的引入方式

CSS 的引入方式共有三种：行嵌式、内嵌式、外联式。

二、选择符

CSS 的选择符是被施加样式的对象，它可以是一个元素或一组共享相同格式的元素。常用的有以下几类。

1、类型选择符（Type Selector）

类型选择符直接以元素、对象的名称作为选择符，这是最常见的选择符。

2、类选择符（Class Selector）

类选择符选择所有 class 属性值等于 className 的元素，语法结构如下。

.className{property: value;}

示例如下所示。

.authorname{color:blue;}

3、ID选择符（ID Selector）

ID 选择符和类选择符的区别就是将.改为#。

三、浮动和定位

1、定位显示

元素的定位是指指定元素的显示位置。CSS 中定位分为两种：

绝对定位：absolution，是以父元素(设置了 position 属性)的左上角为原点，通过偏移量来决定显示的位置。偏移后，原来的位置不再占用空间。

absolution 属性值：

(1) 以父元素(设置了 position 属性)左上角为基准，进行偏移。

(2) 如果父元素没有设置 position 属性，则向上以父元素的父元素......直到浏览器左上角为基准。

相对定位：relative，是指相对于自身原来位置的偏移量来决定显示的位置。偏移后，原来的位置还要占用空间。

偏移量通过 left 属性和 top 属性来决定。

2、环绕文本

环绕文本是指一个元素的文本环绕另一个元素的文本或图片。在 CSS 中通过 float 属性设置浮动来实现，属性值为 left 或 right ，代表向左或向右浮动。

float浮动的原则：

(1)上方元素不浮动，则浮动元素上不去；

(2)浮动元素，脱离原来的文档流；

(3)下方元素会占据浮动元素的位置；

(4)浮动会对后续元素有影响，要清除浮动的影响。

四、常用属性

CSS 的样式属性有很多，通过设置这些属性的值可以改变相应元素的显示方式。最常用的元素属性有字体属性、颜色属性、背景属性、文本属性、边框属性等。

1、字体属性

字体属性(font)是最常用的 CSS 的属性，选择正确的字体会对网站的用户体验产生巨大影响。通过设置字体属性的值可以改变字体的显示方式，包括字体的类型、风格、大小、拉伸等。下面将详细介绍各个有关的属性。

• font-family 属性

font-family 属性用于指定字体的类型，默认值是浏览器确定的字体，如果名称中有空格，属性值要用双引号括起来，请参见下面的例子。

font-family:Arial;
font-family:"Time New Roman";

• font-style 属性

font-style 属性主要用于指定斜体文本，属性值可以是以下几种。

normal：文字正常显示。

italic：文本以斜体显示。

oblique：文本为倾斜，与斜体非常相似。

请参见下面的例子。

font-style:italic;

• font-weight 属性

font-weight 属性的值用来设置字体的粗细程度，常用的属性值有以下几种。

bold：加粗。

normal：默认值为标准字体。

也可以用数字来表示字体的粗细程度。请参见下面的例子。

font-weight:bold;
font-weight:600;

• font-size 属性

font-size 属性的值用来设置字体的大小。请参见下面的例子。

font-size:12pt;

2、文本属性

CSS 中与文本样式有关的属性包括6种，如下所示。

• text-align 属性

text-align 属性用来设置文本的对其方式，取值可以有以下几种。

left：文本左对齐。

right：文本右对齐

center：文本居中

justify：文本两端对齐。

• text-indent 属性

text-indent 属性用来设置文本的首行缩进，单位是像素(px)或磅(pt)。

• text-transform 属性

text-transform 属性用于指定是否将文本中的字母全部大写、全部小写或者首字母大写，对应的取值分别是 uppercase、lowercase 和 capitalize。

• text-decoration 属性

text-decoration 属性用来设置是否给文本添加装饰，属性值可以取以下几种。

none：不加任何画线。

underline：加下画线。

overline：加上画线

line-through：加删除线

blink：使文字闪烁。

• vertical-align 属性

vertical-align 属性用来设置文本的垂直对齐方式，属性的值可以为 baseline、sub、super、top、text-top、middle、bottom 或 text-bottom。

• line-height 属性

line-height 属性用来设置文本的行间距，属性值是一个具体的数值。请参见下面的例子。

line-height:1.5;

3、颜色和背景属性

在CSS中，通过颜色属性color可以设置元素的前景色，设置元素的背景色需要使用background-color属性。表示颜色的方法，通常有以下两种。

3.1 名称表示法

直接用颜色的英文名称来表示，请参见下面的例子。

color:red;
background-color:blue;

3.2 "#RGB" 表示法

R、G、B 分别代表红绿蓝三原色，每种颜色的取值用两位十六进制表示，即从 00 到 FF ，共有256种不同的取值。

与背景有关的设置除了背景色外，还包括背景图像，相关的 CSS 属性有以下几种。

• background-image 属性

none：用于定义背景图像。

URL：指定背景图像

background-image:URL("animal.jpg");

• background-repeat 属性

background-repeat 属性用于指定背景图像是否通过重复出现来平铺背景，默认取值是 repeat 。其取值有如下。

repeat：设置背景图像完全填充被选择元素。

repeat-x：设置背景图像在水平方向上填充被选择元素。

repeat-y：设置背景图像在垂直方向上填充被选择元素。

no-repeat：设置背景图像不进行平铺。

background-repeat:repeat-y;

• background-position 属性

background-position 属性：在设置背景图像后，可以用 background-position 属性来指定背景图像的位置。取值可以是百分比，也可以是 top、center、bottom、left 和 right。请参见下面的例子。

body{
        background-image:url("logo.png");
        background-position:100%center;
        background-repeat:no-repeat;
}

4、设置文本的显示方式

文本显示方式是指文本内容在浏览器中以任何形式显示。其取值分别如下。

• block：块显示方式

是指文本以块的方式来显示，块的大小取决于文本内容的大小，文本内容默认为左对齐。还有另外的方式来设置块的位置和大小。

position：其取值可以为 absolute、relective。默认取值为 static。

width：设置行宽。

height：设置行高。

discretion{
               display:block;
               background-color:silver;
               position:absolute;
               width:300px;
               height:60px;
}

• line：行显示方式

指文本内容以行的方式来显示，各标记内容按先后顺序首尾相连。

• list-item：列表显示方式

指文本内容在浏览器中以列表的方式来显示。在列表显示方式中，可以通过 list-style-type 属性来指定项目符号的外观，可取的值有 disc(圆盘)、circle(圆圈)、square(方块)、decimal(十进制数)等。请参见下面的例子。

price{
        display:list-item;
        list-style-type:circle;
}

• none：不显示元素的内容。

dispaly:None    不显示文本，不占用空间

visiblitiy:None   不显示文本，占用空间