CSS 的介绍

 

第一章 的介绍

 

1.css：“层叠样式表”，它是cascading style sheets的缩写，作用就是给html标签加表现形式（样式-显示），如：字体，图片，列表，位置等。

在浏览器中可以看到部分：

html：“超文本标记语言”，主要作用把内容（文字、图片、视频等）放入网页中--结构

css：“层叠样式表”，主要作用给html进行样式的显示，如何的布局--样式

javascript：“浏览器的脚本语言”，主要作用给html加动态效果（特效）--行为

css特点：

可以非常精准的定位，定位某个或某些标记，给这些标记加样式

html和css代码分离，减少后期工作量

 

第二章 css 基础

 

2.1 css 的基本语法

css样式表由语法规则组成，由多个语法规则组成样式表

一个css语法规则由“选择器”和“声明语句”组成

选择器：如何的精准定位选择到某一个或某些html标记的方法，选择器有很多方式

声明语句：就是如何去给html标记加样式的属性和值，每个声明语句用分号结束，多个声明语句用花括号扩起来，这个时候就是给某个或某些标记加这个里面的所有样式（属性和值）

案例：

2.2css的引入方式

1. 内嵌方式：把css样式表通过一对标签写在html文件的head标签中，当成html的标记来使用，一般情况都是写到head中，不推荐写到别的地方：

语法：

 

  <style type=:”text/css”>

     语法规则

<style>

 

案例：

 

2.行内方式：把css样式成html的一个属性来写，如：<div style=”值”></div>

语法：

   <h1 style=”color:red; font-size:50px”>kkk</h1>

案例

 

3.外链方式：把css样式表写到一个以css（indx.css)为结尾的文件中，把这个文件引入到某个html文件中，当前文件就会有css的效果实现，好处：一个css文件可以给多个html文件使用。

语法：

   <link rel=”stylesheet” type=”text/css” href=”具体的css文件路径”/>

案例：

4. @import:可以在一个css文件中再次引用css

   @import url(“要引入的文件”)

 

 

2.3选择器

标准选择器：通配符选择器，标记选择器，类选择器，id选择器

1. 通配符选择器

语法：*{color：red}

注意：通配符是选择上所有的标记，但是少用，ie6不兼容

案例

2. 标记选择器：

说明：直接写标记名来当成选择器来使用，选择器那个标记当前这个页面所有的都会发生改变

语法：标记名{color：red}

案例

3. 类选择器：又称“class”选择器

说明：每个html标记都有一个公共属性，class属性配合使用的就，这个css属性就是给某些某个标记加一类样式

语法：.class属性的值{color}

注意：类名可以给不同的标记加上，这时候这些标记统称为一类

再写css选择器是必须加（.）

建议不管是某个或某些标记都是用类的方式

 

案例：

4. id选择器

说明：每个html标记都有一个公共的属性id，每个id必须是唯一的

语法：#id的值{color：red;}

注意：id选择器只是给一个标记加样式，一般用于js的动态效果使用。

id和class是分开使用的，id是js使用的，class是给css使用的

案例：

复杂选择器：多元素选择器，后代选择器，子类选择器，伪类选择器

5. 多元素选择器：

说明：把css多个基本选择器进行组合，组合成多种的选择方式

语法：div,p,ul,li,class,my{color:red}

注意：大型的网站一般都是用多元素来替代通配符

每个选择器都用（,）隔开

 

6. 后代选择器

说明：在制作网站时会出现“嵌套”的形式，有可能是多级，而且每个多级标记相同，这个时候就可以选择某个标记中的某个内容

语法：第一代 第二代 第三代{color:red;}

注意：如果某一代有相同的标记，需要每代都写清楚

  p标签中不能嵌套一些块元素

案例：

1. 子类选择器

说明：就是选择一代（或者子孙）

语法：父类 （选择器）>子类 （选择器）

案例：

 

7.伪类选择器

说明：就是给超链接加样式的方法<a href=”#”></a>

link:：默认状态

hover:放上状态

active：当点击时的状态（不放手）

visited：访问过的状态

语法： 选择器：状态{color :red;}

 

注意：一般是默认状态和访问过的状态设置成一样的效果

所有的标记都可以加伪类选择器

案例：

 

第三章：css常用的属性

 

一：文字属性

 

属性名	描述	属性值
font-size	文字大小	像素（px)em(倍数)百分比（%）
font-family	字体类型	宋体，微软雅黑，黑体等 值可以是一个或多个，用逗号隔开
font-style	斜体	italic（斜体）
font-weight	加粗	bold（加粗）100-900

 

 

案例：

二：文本属性

属性名	描述	属性值
color	文本颜色	3种 rgb（255，255，255） 十六进制（#cccccc) 单词(yellow)
text-align	文本水平对齐方式	left|center|right
text-decoration	文本修饰线	underline(下划线)overline(上划线)line-through（删除线） none(无 )
line-height	行高	设置当前行的高度，目的的就是让网文本上下居中，高度和行高一致
text-indent	首行缩进	数值（px）如果是12号字，基本是翻倍
letter-spacing	字符间距	数值（px）
word-spacing	单词间距	数值：(px)

案例：

三：尺寸使用

说明：其实就是元素的宽和高，任何标记元素都有宽和高

 

属性名	描述	属性值
width	宽	像素（px）百分比（%）
height	高	像素（px）百分比（%）
px	像素	浏览器都是由像素点（显示贞）
注意：块元素可以设置宽和高，行内元素设置宽和高是不起作用的，高不设内容自动撑出来

案例：

、

 

 

 

四：列表属性

 

说明：对ul,ol,li,dl,dt,dd进行样式的设置

 

属性名	描述	属性值
last-style-type	列表的符号样式类型	none
list-style-type	列表图片	url 如 list-style-type：url(../01.jpg)
list-style-position	列表符号的位置只对li	inside  outside
list-style	把三个属性的值都放到一个属性中	none url  inside 如果三个属性都有按照上面的顺序 没有的可以不写

 

 

 

 

 

案例

tip：边框

border 粗细 样式 颜色 如：border：1px dashed red

border-bottom: 下边框

 

五：背景属性

 

属性名

描述

属性值

background-color

背景颜色

16进制

background-image

背景图片

url

backtround-repeat

背景平铺方式

no-repeat repeat-x repeat-y

background-position

内景定位

x轴和y轴定位 如position：left top 设置左右和上下

定位方式：

1. 单词定位方式：left|center|right  top|center|bottom 单词定位可以理解为九宫格

left top	center top	right top
left center	center center	right center
left bottom	center  bottom	right bottom

 

2. 像素定位方式：background-position：50px 100px;  离左边50 离上面100

3. 百分比方式：background-position：10% 20% 离左边 离右边

4. 混合方式： background-position：center 100px

 

background-attachment

背景固定

scroll（滚动 默认）fixed（固定）

background

简写形式

颜色 图片 平铺 定位固定 其中的选项可以不写

 

案例：

精灵图：

说明：就是把很多的小图片放入到一个大的背景图中，这个图称为“精灵图”。

在制作网页时必须是背景图

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     

 

 

 

 

 

 

 

 

 

 

 

 

 

 

案例：