CSS学习笔记

CSS 指层叠样式表 (Cascading Style Sheets)。http://www.w3school.com.cn/css/index.asp

CSS作用

用来美化我们的HTML页面的，HTML 决定网页的骨架 ,CSS 化妆，将页面的HTML和美化进行分离。

主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

样式通常存储在样式表（CSS文件）中。外部样式表可以极大提高工作效率。

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。声明由属性值对组成。

selector {

• 属性1：属性1值; 
• 属性2：属性2值;
• ...
• 属性N：属性N值; 

}

CSS选择器selector

选择器的作用：帮助我们找到我们要修饰的标签或者元素

1.id选择器

语法：#id属性值

实例1：id为center的所有元素设置样式。

#center {text-align: center}

实例2：id为fancy的元素内部的表格单元td元素设置样式。

#fancy td {
color: #f60;
background: #666;
}

实例3：id为fancy的表格单元td元素设置样式。

td#fancy {
color: #f60;
background: #666;
}

2.类选择器

语法：.class属性值

实例1：类名为center的所有元素设置样式。

.center {text-align: center}

实例2：类名为fancy的元素内部的表格单元td元素设置样式。

.fancy td {
color: #f60;
background: #666;
}

实例3：类名为fancy的表格单元td元素设置样式。

td.fancy {
color: #f60;
background: #666;
}

3.元素选择器

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

4.属性选择器:

a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

子元素选择器: 父选择器 > 儿子选择器

伪类选择器: 通常都是用在A标签上

引入方式

1. 外部样式: 通过link标签引入一个外部的css文件
2. 内部样式: 直接在style标签内编写CSS代码
3. 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS属性

color：字体颜色：如red或#ff0000。

font-family：字体样式，如Times。

font-style：最常用于规定斜体文本。normal（文本正常显示）。italic（文本斜体显示）。oblique （文本倾斜显示）

font-weight：设置文本的粗细，如使用 bold 关键字可以将文本设置为粗体。

font-size：字体大小，如14px。

text-align:文字对齐方式，如center（居中）。

text-transform：字符转换：none（无），uppercase（大写），lowercase（小写），capitalize（首字母大写）。

text-decoration：文本装饰属性。none（无，如链接不加下划线）。underline 会对元素加下划线。overline 会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线。blink 会让文本闪烁。

background-color：背景颜色。

list-style-type：ul列表的列表项标志类型。如square（设置为方块）