一、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. Selenide UI 自动化测试

       我没有拼写错误,确实不是 Selenium ,但是,只要是 Web UI 自动化测试框架,基本上都是基于Selenium 的.Selenide 也不例外.那为啥不直接用Selenium呢? 因为 ...

  2. Java订单功能模块设计与实现

    在商城项目中,之前我们介绍了购物车功能模块的实现,商品加入到购物车之后,就是到购物车结算,然后显示购物车的商品列表,点击去结算,然后到了未提交前的订单列表, 点击提交订单后,生成此订单,返回订单的订单 ...

  3. IIS加载JSON文件 错误 404

    问题描述 在发布项目的时候,有一些文件是json文件,在网页中进行加载,但是在IIS7发布的时候,json文件居然是404,无法找到,在URL上输入地址也一样. 错误原因 IIS内部机制,不支持直接访 ...

  4. Python 实现接口类的两种方式+邮件提醒+动态导入模块+反射（参考Django中间件源码）

    实现接口类的两种方式 方式一 from abc import ABCMeta from abc import abstractmethod class BaseMessage(metaclass=AB ...

  5. Dubbo（三） 安装Zookeeper 单机-集群

    一.下载zookeeper zookeeper下载地址:https://www.apache.org/dyn/closer.cgi/zookeeper/点击下载 二.启动配置 选择合适版本下载后解压到 ...

  6. 前端之JavaScript--基础

    JavaScript 独立的语言,浏览器具有js解释器 一. JavaScript代码存在形式: - Head中 <script> //javascript代码 alert(123); & ...

  7. java多线程(三)－Executors实现的几种线程池以及Callable

    从java5开始,类库中引入了很多新的管理调度线程的API,最常用的就是Executor(执行器)框架.Executor帮助程序员管理Thread对象,简化了并发编程,它其实就是在 提供了一个中间层, ...

  8. [Spark内核] 第33课：Spark Executor内幕彻底解密：Executor工作原理图、ExecutorBackend注册源码解密、Executor实例化内幕、Executor具体工作内幕

    本課主題 Spark Executor 工作原理图 ExecutorBackend 注册源码鉴赏和 Executor 实例化内幕 Executor 具体是如何工作的 [引言部份:你希望读者看完这篇博客 ...

  9. Oracle COMMIT语句的处理顺序

    Oracle COMMIT语句相信大家都有一定的了解,下面就为您介绍Oracle COMMIT语句的处理步骤,希望对您能有所帮助. Oracle COMMIT语句处理顺序 当事务提交时,Oracle分 ...

  10. 一句话理解字符编码(Unicode ,UTF8,UTF16)

    Unicode和ASCII码属于同一级别的,都是字符集,字符集规定从1到这个字符集的最大范围每个序号都各表示什么意思.比如ASCII字符集中序号65表示"A". 那接下来的UTF8 ...