前端学习笔记之CSS(1)

CSS用来美化页面，页面布局。也是一种标记语言。

HTML的局限性：只关注内容的语义，没有外观设计。

CSS语法规范：由两部分组成：选择器以及一条或多条声明。

简单理解：选择器      {样式}

               给谁改样式  {改什么样式}

CSs样式要写在<style></style>里面。

Css代码风格：

样式格式书写

(1)紧凑格式：

 (2)展开格式：更提倡这种

样式大小书写：通常小写。

空格规范：属性值前面，冒号后面保留一个空格。选择器和大括号中间保留一个空格。

选择器分为基础选择器和复合选择器

基础选择器由单个选择器组成，包含：标签选择器、类选择器、id选择器、通配符选择器。

标签选择器：标签名作为选择器。

类选择器：可以单独选择其中一个或者某几个标签，可以实现差异化选择。

利用class属性来调用class类。

类选择器口诀：样式点定义，结构类调用。一个或多个，开发最常用。

   

 类选择器-多类名：一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这些标签。可以把一些标签元素相同的部分放到一个类里面。

 

Id选择器：可以为标有特定标签的元素指定特定的样式。Css中通过#来定义。

 

 Id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

 

 通配符选择器：使用*定义，表示选取页面中所有的元素标签。

  不需要调用，自动给所有的元素使用样式。

 

CSS字体属性：定义字体系列、大小、粗细、和文字样式

 

 字体大小：

  标题标签特殊，需要单独制定字体大小。

字体粗细：

 

实际开发中更提倡用数字表示字体的粗细。数字不加单位。

文字样式：

 字体复合属性：其实就是简写的方式。

 

 顺序不能更改，属性间以空格隔开。

 字体属性总结：

CSS的文本属性：如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等外观样式。

文本颜色：

 对齐文本：用text-align来设置水平对齐方式。

   

 装饰文本：如添加下划线、删除线、上划线等。通过text-decoration来设置

 

 文本缩进：将段落的首行缩进，使用text-indent设置。

 行间距：用line-height来设置。

 CSS的引入方式：

 内部样式表：把CSS写到html的页面内部，将css代码抽取出来，单独放到<style>标签里面。

    

 行内样式表：适用于修改简单样式。如：

 外部样式表：将样式单独写道CSS文件中，然后将CSS引入到页面中使用。

 

想让图片居中对齐，其实是对其父标签居中对齐。

Chrome调试工具：

打开调试工具：打开chrome浏览器，按下F12，或者右击页面空白处，点击检查。

使用调试工具：

Emmet语法：前身Zen coding,可以使用缩写来提高编写速度。

 

复合选择器：由两个或者多个基础选择器，通过不同的方式组合而成。常用的有：后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器(重要)：又称为包含选择器，可以选父元素里面的子元素。

 

 子选择器：选择某元素的最近一级子元素。

 并集选择器：可以选择多组标签，并为他们定义同样的样式，用于集体声明。英文逗号分隔。任何形式的选择器都可以作为并集选择器的一部分。

伪类选择器：向某些选择器添加特殊的效果，如给链接添加特殊效果，或者选择第一个，第n个元素。用冒号表示(:),如:hover、:first-child。种类很多，如链接伪类，结构伪类、表单伪类。

  链接伪类：

 

 链接伪类注意事项：

为了确保生效，按照LVHA的顺序声明:

:linked  :visited  :hover  :active

 由于a链接在浏览器中具有默认样式，通常我们需要给链接单独制定样式

实际开发中的写法：

 :focus伪类选择器：选取获得焦点的表单元素

 

 复合选择器总结：