一、CSS简介

 1.CSS是什么

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。特点：实现了表现与结构相分离

2.css基础语法

css是由选择符和声明两大部分组成，声明由属性和值组成。

语法： 选择符{
　　　　　　　　属性:值;
　　　　　　　　属性:值;
　　　　　　}

注： （1）属性和值用冒号连接　　　　（2） 一条声明结束要添加分号　　　　（3）属性和属性不分先后顺序

3、样式表的创建

1.内联样式（行间样式，行内样式）

语法：<标记 style="属性:值;"></标记>

eg:  <h1 style="color:red;">内联样式</h1>

2.内部样式（嵌入式样式）

语法：

<head>

    ...

    <style type="text/css">

        ...此处写CSS样式

    </style>

</head>

注：一般将style标签放置在head部分

3.外部样式

（a）首先需要创建一个外部css文件（后缀名为.css）

　　  使用link标签引入css文件

　　  语法： <link rel="stylesheet" type="text/css" href="css文件路径"/>

　　eg:

<head>

    ...

    <link href="xxxx.css" rel="stylesheet" type="text/css">

</head>

　　  注：rel（relationship的简称）用来设置当前文件和引入的文件之间的关系

（b）使用@import的方式引入css文件（import方式现使用较少，老程序员的代码可能会出现如此写法）

　　  语法： @import "css文件路径";

　　eg:

<head>

    ...

    <style type="text/css">

        @import "My.css"; 此处注意.css文件的路径

    </style>

</head>

　　

注：link和@import引入外部样式的区别：

（1）link属于html标签，除了可以引入css文件外还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗的区别）

（2）link加载的css文件和页面同时加载，@import引入css文件在页面加载完成后载入（加载顺序的区别）

（3）link是html标签，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持的区别）

（4）link支持js改变DOM样式，@import不支持（对js支持的区别）

4、样式表的优先级

在没有出现!important的时候，采取就近原则（离被设置的元素越近，优先级越高）

内联样式>内部样式>外部样式

当出现!important的时候，它的优先级最高

!important>内联样式>内部样式>外部样式

5、css注释

语法： /*注释内容*/（********注意区分CSS注释和html注释，出错难以发现*******）

 二、css选择器

基本选择器

1.id选择器

语法： <标记 id="***"></标记>

　　    #id名{属性:属性值;}

　 eg: <h1 id="test">测试数据</h1>

　　　#test{color:red;}

注：a）id名是唯一的，不能出现同名的id　　　　b) id选择器的优先级最高　　　　c) id名要语义化命名（下划线连接法，驼峰命名法）

2.class选择器（类选择器）

语法：<标记 class="***"></标记>

　　  .类名{属性:属性值;}

eg: <a href="#" class="nav">新闻资讯</a>

　　.nav{color:red;}

注：a)可以给具有相同样式的元素添加同一个class名　　　　b)类选择器的优先级仅次于id选择器

注：还可以使用类名词列表的方式设置样式

　　语法： <a href="#" class="nav news">新闻资讯</a>

　　　　　　.news{color:pink;}

3.标签选择器（类型选择符，元素选择符）

语法：标记名称{属性:属性值;}

eg: a{text-decoration:none;}

注：1)如果想改变某个元素的默认样式时，可以使用类型选择符；
　　2)当统一文档某个元素的显示效果时，可以使用类型选择符；

4.通用选择器（通配符）

语法：*{属性:属性值;}

常用写法： *{margin:0; padding:0;}

注：*匹配html根元素下的所有标签元素

组合选择器

5.群组选择器（多元素选择器）

语法： 选择符1,选择符2,选择符3{属性:属性值;}

eg: .box,.uls,p{color:black;}

6.后代选择器(包含选择器)

语法：选择符1 选择符2{属性:属性值;}

eg:

 div p {color: yellow;}

<div>

    <p>xxxxxx</p>

    <div>

        <p>xxxx</p>

    </div>

</div>

　注：a)选择符1和选择符2必须是包含与被包含关系

7.子元素选择器

语法：父标签>字标签{属性：属性值}

eg:

div > p {color: yellow;}

<div>

    <p>xxxxxxx</p>

    <p>xxxxxxx</p>

</div>

注：匹配所有div标签里嵌套的子P标签，之间用>分隔。

8.毗邻元素选择器

语法：选择器+毗邻选择器{属性：属性值}

eg:

div + p {color: yellow;}

<div>xxxx</div>

<p>xxxxx</p>

注： 匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

属性选择器

7.属性选择器：

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

1.属性选择器

设置所有具有title属性的标签元素；

<style type="text/css">

[title]

{

color:red;

}

</style>

<h2 title="Hello world">Hello world</h2>

<a title="a1" href="http://xxxx.com.cn">某某某网址</a>

2.属性和值选择器

下面的例子为 title="xxx" 的所有元素设置样式：

<style type="text/css">

[title=use]

{

border:5px solid blue;

}

</style>

<h1>可以应用样式：</h1>

<img title="use" src="/i/w3school_logo_white.gif" />

<br />

<a title="use" href="http://xxxxx.com.cn">某某某网址</a>

<hr />

<h1>无法应用样式：</h1>

<p title="unuse">Hi!</p>

<a class="W3School" href="http://xxxx.com.cn">某某某网址</a>

3.属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值

<style type="text/css">

[title~=hello]

{

color:red;

}

</style>

<h1>可以应用样式：</h1>

<h2 title="hello world">Hello world</h2>

<p title="student hello">Hello  students!</h1>

<hr />

<h1>无法应用样式：</h1>

<h2 title="world">Hello world</h2>

<p title="student">Hello students!</p>

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

<style type="text/css">

[lang|=en]

{

color:red;

}

</style>

<h1>可以应用样式：</h1>

<p lang="en">Hello!</p>

<p lang="en-us">Hi!</p>

<hr />

<h1>无法应用样式：</h1>

<p lang="us">Hi!</p>

<p lang="zh">Hao!</p>

伪类选择器

8.伪类选择器

语法： 选择符:hover{属性:属性值;}

(1)超链接a的四个状态

a） a:link 链接没有被访问过时的状态（超链接的初始状态）

b） a:visited 链接被访问过后的状态

c） a:hover 鼠标滑过时的状态

d) a:active 鼠标按下时的状态

记忆方法：爱恨原则

L o V e H A t e

注：为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

eg: a{color:red;} a:hover{color:green;}

注：除了可以给a添加滑过状态，还可以给其他元素添加滑过状态

eg： .uls li:hover a{color:red;}

当滑过li时，li中的a字体颜色变为红色

(2) before、after

P:before 在每个<p>元素的内容之前插入内容;

P:after 在每个<p>元素的内容之后插入内容。

eg:

 p {

        color: yellow;

    }

    p:before{

        content: "before...";

    }

    p:after{

        content: "after...";

    }

<p>测试数据</p>　　

css选择器权重

将css选择器的权重分为四个等级：

第一等：内联样式 style="..." 权重：1000

第二等：id选择器 权重：100

第三等：类选择器，伪类选择器，属性选择器 权重：10

第四等：标签选择器（类型选择符），伪元素选择器 权重：1

后代选择器权重：所有选择器权重之和

群组选择器权重：选择器自身的权重

当权重相同时，后写的样式会覆盖先写样式

扩展：

css层叠的概念（含义）

层叠指的是样式的优先级，当产生冲突时以优先级高的为准

1. 内联样式>内部样式>外部样式（除非使用!important标记 ）

2. id选择器>类选择器>元素选择器

3. 权重相同时取后面定义的样式

三、CSS核心属性

1.、字体类属性

1.1.字体类型语法： font-family:字体1,字体2,字体3;

常用写法：body{font-family:"微软雅黑",Arial;}

注：a）多个字体之间用逗号分隔

b) 中文字体要加双引号，英文字体由多个单词组成也要加双引号

c) 浏览器会优先识别字体1，如果找不到，识别字体2，如果都找不到，采用浏览器默认字体

1.2.字体大小语法： font-size:数值+单位;

eg: font-size:12px;

注：a）浏览器默认字体大小为16px;

　　b）字体单位常用的有px,em,rem,pt;

　　c) 字体一般设置偶数不设置奇数

　　d) font-size:medium; 等价于 font-size:16px;

1.3.字体加粗语法：font-weight:normal(常规字体)| bold(加粗)|bolder(加粗)| 100-900;

注：100-500为常规字体，600-900为加粗字体

eg： h1{font-weight:normal;}

1.4.字体倾斜语法：font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

eg: p{font-style:italic;}

1.5.小型大写字母字体语法： font-variant:normal(常规字体)|small-caps(小型大写字母字体);

注：只对英文起作用

1.6.font复合写法语法： font:style weight size family;

eg: font:oblique bold 12px "宋体";

注：a）font-size和font-family不可以互换位置

　　b) font-size和font-family必须放在最后，不可以和其他属性互换位置

　　eg： font:12px/1.5 "微软雅黑";

　　上述写法代表字体大小为12px,行高为字体大小的1.5倍即18px,字体类型为微软雅黑；

1.7.字体颜色语法：color:颜色值;

注：颜色值的三种写法：

a）十六进制写法 #000（黑色） #fff(白色) #f00（红色） (项目开发中常用的写法)

b) rgb模式 rgb(0,0,0) 黑色 rgb(255,255,255) 白色 rgb(255,0,0) 红色

c) 颜色单词 red(红色) green(绿色) blue(蓝色) yellow(黄色) black(黑色) white(白色) gray(灰色)

eg: color:#000; color:rgb(0,0,0); color:black;

2、文本类属性

2.1.文本水平对齐方式语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);

注：a）justify两端对齐只对英文起作用

b) 设置文本内容在父元素中的水平对齐方式，text-align给父元素加

2.2.行高语法： line-height:数值+单位;

注：a）当单行文本的行高等于容器高时，可以实现单行文本在容器中垂直居中

　　b) line-height不允许设置负值

　　c）当line-height只写数值不加单位时，代表倍行高，即按照字体大小的倍数设置行高

2.3.文本修饰语法：text-decoration:none|underline(下划线)|overline(上划线)|line-through(删除线);

eg：a{text-decoration:none;} 去掉超链接下划线

2.4.首行缩进语法：text-indent:数值+单位;

eg: text-indent:32px;

注：text-indent设置正值向后缩进，负值向前缩进

2.5.字符间距语法： letter-spacing:数值+单位;

注：主要用来设置字与字，字母与字母之间的间距

letter-spacing允许设置负值

2.6.词间距语法： word-spacing:数值+单位;

注：主要用来设置英文单词和单词之间的间距

允许设置负值

2.7.控制文本大小写语法：text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

注：只对英文起作用

2.8.长单词换行语法：word-wrap:normal(默认值)|break-word(长单词换行);

注：在长单词或URL地址内部进行换行

2.9.强制在一行显示语法：white-space:normal(默认值)|nowrap(不换行，强制在一行显示);

2.10.文本流控制语法：layout-flow:horizontal（从左到右）/vertical-ideographic（从上到下）;

2.11.垂直对齐方式语法：vertical-align:baseline(基线对齐)|top(顶部对齐)|middle(中部对齐)|bottom(底部对齐);

注：vertical-align主要应用在两个方面:

　　　　a）用来设置表格单元格内容的对齐方式

　　　　b) 设置行内元素的基线相对于该元素所在行的基线的垂直对齐

3、列表类属性

3.1.列表符号样式语法： list-style-type:disc(实心圆)|circle(空心圆)|square(方块)|decimal(数字)|none(去掉列表符号样式);

3.2.使用图片作为列表符号语法：list-style-image:url(图片路径);

3.3.列表符号位置语法：list-style-position:outside(外边)|inside(里边);

3.4.去掉列表符号样式语法：list-style:none;

常用写法： ol,ul{list-style:none;}

li{list-style:none;}

4、背景类属性

4.1.背景色语法：background-color:颜色值;

eg: background-color:blue;

4.2.背景图片语法：background-image:url(图片路径);

eg: background-image:url(1.jpg);

4.3.背景平铺属性语法：background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.4.背景图位置语法：background-position:left|center|right|数值 top|center|bottom|数值;

eg: background-position:right bottom;

注：a）background-position的属性值中，第一个值代表水平方向，第二个值代表垂直方向

　　b）当设置数值时，水平方向向右为正，向左为负，垂直方向向下为正，向上为负

　　c) 当水平方向和垂直方向都为center，可以省略第二个值

4.5.background属性复合写法（简写方式）语法： background:背景色 背景图 背景平铺属性 背景图位置;

eg: background:#f00 url(1.jpg) no-repeat right bottom;

4.6.背景图的显示原则

a）当容器尺寸等于背景图尺寸时，背景图恰好显示在容器中

b) 当背景图尺寸小于容器尺寸时，背景图默认平铺，直至铺满整个容器

c) 当背景图尺寸大于容器尺寸时，只能显示容器范围以内的背景图

4.7.背景图固定语法： background-attachment:scroll(滚动)|fixed(固定);

注：主要用来设置当出现滚动条时，背景图固定不跟随滚动条滚动

4.8.网页上常见的三种图片格式

a）jpg格式：有损压缩格式，适用于颜色丰富的图像

b) gif格式：有损压缩格式,支持动画，支持透明

c) png格式：有损压缩格式，支持透明

5、浮动属性

浮动属性语法: float:none(默认值，不浮动)|left(左浮动)|right(右浮动);

6、清除浮动语法：clear:none|left|right|both;

none:默认值，不清除任何浮动

left: 清除左浮动

right: 清除右浮动

both:清除左浮动和右浮动

注：前面有元素存在左浮动或右浮动，影响到该元素的正常显示，给受影响的元素添加clear属性

从零开始学习前端开发 — 2、CSS基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  3. 从零开始学习前端开发 — 6、CSS布局模型

    一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...

  4. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  5. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  6. 从零开始学习前端开发 — 1、HTML基础

    一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...

  7. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  8. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  9. 从零开始学习前端开发 — 11、CSS3选择器

    一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...

随机推荐

  1. Linux发行版 CentOS6.5下删除分区操作

    本文地址http://comexchan.cnblogs.com/,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢!   有时候,发现分区分错了.需要删除分区,只需按照分区的步骤逆向操作 ...

  2. python爬取大众点评

    拖了好久的代码 1.首先进入页面确定自己要抓取的数据(我们要抓取的是左侧分类栏-----包括美食.火锅)先爬取第一级分类(美食.婚纱摄影.电影),之后根据第一级链接爬取第二层(火锅).要注意第二级的p ...

  3. python Is 与== 的坑

    以前看过一篇python技术贴,说用is替代==,这样更加pythonic?然后我就能把用'=='的地方用'Is'替代,结果程序运行结果的偏差很大,甚至完全不同.后来发现,Is与==使用上是有区别的. ...

  4. 利用lsof恢复进程占用的文件

    说明:经常会遇到这种情况,没有使用正确的方式清理进程占用的文件,比如日志.导致空间并没有释放.也有的时候需要恢复进程占用的文件. 解决方式 lsof |grep del # 找出自己要恢复的文件名称. ...

  5. 移动端页面 css reset

    这个是通用的  css reset.这个版本适用于 移动端页面 如果需要在 PC端使用,可以 修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方 ...

  6. 漫话JavaScript与异步·第三话——Generator：化异步为同步

    一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...

  7. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  8. 云计算之路-阿里云上： RDS实例CPU跑满引发的故障

    今天上午 10: 40 左右,我们所使用的阿里云 RDS 实例的 CPU 突然飙高到近 100% ,造成大量数据库查询操作缓慢.超时,在这个恶劣条件下大量 memcached 缓存无法建立,这样的雪上 ...

  9. 简单认识python cmd模块

    0X00 前言 在早前用别人的工具时,发现有些大佬会用到交互式shell,那时候就挺好奇的,但是一直都没有看一下怎么做到的. 今天在翻p牛的博客的时候,看到他早之前写的一个工具就有用到交互式shell ...

  10. gulp基于node流的自动化构建工具

    GULP 在我才接触gulp的时候 看他就是一个 通过压缩各种文件来提升用户体验的开发工具   那是因为  对他的理解并不深    他真正强大 之处 在于他的     管子  .pipe()  可以 ...