什么是 CSS ?

CSS 指层叠样式表 (Cascading Style Sheets)，用于对页面进行美化。

存在的方式有3种：

元素内联：在标签中使用 style='xx:xxx;'
页面嵌入：在页面中嵌入< style type="text/css"> </style >
引入外部 CSS 文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

基础语法

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

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

编写注释

/*注释内容*/

元素内联

直接在标签上应用，代码如下：

<p style="background-color:yellow">

元素内联

</p>

效果如下：

页面嵌入

在Head里面写好css样式然后再style标签中应用。

主要的样式选择器有：id 选择器，class 选择器，标签选择器，层级选择器，组合选择器和属性选择器。

下面将逐一介绍样式选择器的使用。

样式应用优先级：直接在标签上写的 style 优先，然后按编写顺序，就近原则应用。

class 选择器

class 选择器应用的比较广泛一些，基本语法如下：

<head>

    <meta charset="UTF-8">

    <title>class选择器</title>

    <style>

        .s1{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--使用class="s1"来应用head中.s1的样式-->

    <div class="s1">我是 class 选择器</div>

</body>

id 选择器

由于id不能重复，一般不推荐使用id选择器，知道即可，了解一下基本语法：

<head>

    <meta charset="UTF-8">

    <title>id选择器</title>

    <style>

        #s1{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--使用id="s1"来应用head中#s1的样式-->

    <div id="s1">我是 id 选择器</div>

</body>

标签选择器

给所有同一类型的标签添加样式

<head>

    <meta charset="UTF-8">

    <title>标签选择器</title>

    <style>

        /*所有div都会应用此样式*/

        div{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <div>我是标签选择器1</div>

    <div>我是标签选择器2</div>

</body>

关联选择器（层次选择器？）

<head>

    <meta charset="UTF-8">

    <title>关联选择器</title>

    <style>

        /*注意是中间空格*/

        .idselect p{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--div标签里面只有p标签才能应用此样式-->

    <div class="idselect">

        我是DIV

        <p>我是P</p>

    </div>

</body>

效果如下：

组合选择器

以上选择器都可以组合起来用，代码如下：

<head>

    <meta charset="UTF-8">

    <title>组合选择器</title>

    <style>

        #i1,.c1,div p{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--div标签里面只有p标签才能应用此样式-->

    <div>

        我是DIV

        <p>我是P</p>

    </div>

    <div id="i1">

        我是#i1

    </div>

    <div class="c1">

        我是.c1

    </div>

</body>

看效果吧：

属性选择器

对选择到的标签通过属性再进行一次筛选

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        .c1[name="dave"]{

            width: 50px;height: 50px;

            background-color: chartreuse;

        }

    </style>

</head>

<body>

    <!--只有符合属性规则的标签才会应用样式-->

    <div class="c1">我是DIV</div>

    <input class="c1" type="text" name="dave">

    <input class="c1" type="password">

</body>

看效果吧：

更多选择器请参考：CSS 选择器参考手册

外部引入

css 样式也可以写在单独文件中，在头部直接引入也可以用

<head>

    <meta charset="UTF-8">

    <title>外部引入</title>

    <link rel="stylesheet" href="css/commons.css" />

</head>

CSS 常用属性

基本

height           # 高度,百分比

width            # 宽度,像素,百分比

text-align:ceter # 水平方向居中

line-height      # 垂直方向根据标签高度

color            # 字体颜色

font-size        # 字体大小

font-weight      # 字体加粗

background（背景）

1. background-color 背景颜色，代码如下：

<div style="background-color: red">

    Hello World

</div>

更多颜色请参考这里：CSS颜色集

2. background-image 背景图片，代码如下：

<!--默认是平铺,加上 background-repeat: no-repeat可以取消重复，此外还有：repeat-x;repeat-y-->

<div style="background-image: url(image/favicon.ico);height: 80px;background-repeat: no-repeat" >

</div>

3. background-position

应用场景：所有的小图都放置在一张大图上，利用定位背景图像显示该大图的某个部分，达到显示不同小图的目的。

<head>

    <meta charset="UTF-8">

    <title>background-position</title>

    <style>

        .bg-icon{

            /*定义一个图片*/

            background-image: url(icon1.png);

            /*设置图片不平铺*/

            background-repeat: no-repeat;

            height: 18px;

            width: 18px;

            /*设置一个边框用来演示这个例子的窗口*/

            border: 2px solid red;

            /*根据图片xy轴定位来调整窗口显示小图的位置*/

            background-position-x: 0;

            background-position-y: -80px;

        }

    </style>

</head>

<body>

    <div class="bg-icon"></div>

</body>

border 边框，代码如下：

<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->

<!--第一种：线的粗细为1像素，实线、红色-->

<div style="border:1px solid red;height:10px" ></div>

<!--第二种：线的粗细为1像素，点、蓝色-->

<div style="border:1px dotted blue;height:10px" ></div>

<!--第三种：线的粗细为1像素、虚线、紫色-->

<div style="border:1px dashed purple;height:10px" ></div>

显示效果如下：

边框也可以单独设置上下左右任意一边，代码如下：

<!--在左边设置边框，3px、实线、蓝色-->

<div style="border-left: 3px solid red">Hello World</div>

显示效果如下：

display

<!--display 为none将隐藏标签-->

<div style="display: none;">Hello World</div>

<!--默认inline。此元素会被显示为内联元素，元素前后没有换行符。-->

<div style="display: inline;background-color: chartreuse ">Hello World</div>

<!--block:此元素将显示为块级元素，此元素前后会带有换行符。-->

<a style="display: block;background-color: chartreuse ">Hello World</a>

<!--行内块元素：既有设置行内标签属性，也有块级标签属性-->

<a style="display: inline-block;background-color: chartreuse ">Hello World</a>

更多属性可以参考：CSS display 属性

float

浮动，用途很广泛，让标签浪起来，块级标签也可以堆叠。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>luotianshuai_study</title>

    <style>

        .float-left{

            width:20%;

            background-color:red;

            height: 500px;

            float: left;

            /*这里长和宽，可以用百分比或者直接指定像素来指定*/

        }

        .float-right{

            width: 80%;

            background-color:blue;

            height: 500px;

            float:left;

            /*这里长和宽，可以用百分比或者直接指定像素来指定*/

        }

    </style>

</head>

<body>

    <div class="float-left"></div>

    <div class="float-right"></div>

</body>

</html>

注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：

<div style="clear:both;"></div>

margin、padding

1.margin（外边距）

/*外边距从上往下移50px*/

margin-top: 50px;

/*外边距从左往右移50px*/

margin-left: 50px;

更多属性请点击这里

2.padding（内边距）

/*内边距从上往下移50px*/

padding-top: 50px;

/*内边距从左往右移50px*/

padding-left: 50px;

更多属性请点击这里

cursor

<div style="cursor:pointer">停放在这里显示小手(pointer)</div>

<div style="cursor:help">停放在这里显示问号(help)</div>

<div style="cursor:wait">停放在这里显示圆圈(wait)</div>

<div style="cursor:move">停放在这里显示移动(move)</div>

<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

day15-CSS补充知识点

position（定位）

position 主要有4个属性值：

static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed: 绝对定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。如果元素没有已定位的父元素，那么它的位置相对于.

fixed 应用例子

下面的例子主要是将“标题栏”固定的顶部，“返回顶部”按钮固定在右下角，无论你怎么滚动屏幕，它们相对浏览器窗口都是固定在同一位置。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>固定标题栏&&返回顶部</title>

    <style>

        .pg-header{

            background-color: crimson;

            height: 48px;

            color: #FFFFFF;

            position: fixed;

            top:0;

            left:0;

            right:0;

        }

        .pg-body{

            background-color: olivedrab;

            height: 500px;

            margin-top: 50px;

            color: #FFFFFF;

        }

        .gototop{

            background-color: aqua;

            position: fixed;

            right: 30px;

            bottom: 30px;

        }

    </style>

</head>

<body>

    <div class="pg-header">我是头部</div>

    <div class="pg-body">我是内容1</div>

    <div class="pg-body">我是内容2</div>

    <div class="gototop">返回顶部</div>

</body>

</html>

relative && absolute 应用例子

relative 相对于网页整体固定。
absolute 是相对于一个有着 position 属性的父级对象进行定位的，如果不存在，那么它就会以body为定位对象，按照你首次打开浏览器的整个窗口进行定位，当你向下滑动时它会随之移动。

看代码：

    <!--这里定义了一个reletive属性的position对象-->

    <div style="position:relative;width: 500px;height: 200px;border: 2px solid red;margin: 0 auto">

        <div style="position: absolute;right:0;bottom:0;width: 100px;height: 50px;border: 2px solid blue;"></div>

    </div>

<!--absolute属性的这个对象是相对于它父级的对象定位的-->

还有个输入框的例子看看：

<div style="height: 35px;width: 400px;position: relative;">

    <input type="text" style="height: 35px;width: 370px;padding-right: 30px">

    <span style="position: absolute;right: 6px;top: 10px;background-image: url(user_icon.jpg);height: 18px;width: 18px;display: inline-block;"></span>

</div>

opacity（透明度）

用于设置 div 元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。

代码如下：

div

{

opacity:0.5;

}

注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

z-index（页面层级展示顺序）

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

来看个三级页面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>z-index</title>

    <style>

        .page1{

            z-index: 10;

            background-color: aquamarine;

            height: 300px;

            width: 500px;

            position: fixed;

            top: 50%;

            left: 50%;

            margin-top: -150px;

            margin-left: -250px;

        }

        .page2{

            z-index: 9;

            background-color: #AAAAAA;

            top:0;

            right:0;

            bottom: 0;

            left:0;

            position: fixed;

            opacity: 0.5;

        }

        .page3{

            background-color: blue;

            height: 500px;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="page1">页面一</div>

    <div class="page2">页面二</div>

    <div class="page3">页面三</div>

</body>

</html>

overflow

这个属性定义溢出元素内容区的内容会如何处理。主要属性如下：

visible: 默认值。内容不会被修剪，会呈现在元素框之外。
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
hidden: 内容会被修剪，并且其余内容是不可见的。
inherit: 规定应该从父元素继承 overflow 属性的值。

<body>

    <!--overflow:auto属性：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。-->

    <div style="height: 50px;background-color: crimson;overflow: auto">

        Dave<br>

        Dave<br>

        Dave<br>

        Dave<br>

        Dave<br>

    </div>

</body>

hover

hover 选择器用于选择鼠标指针浮动在上面的元素。

标题栏鼠标滑过变色的实现例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标滑过变色</title>

    <style>

        .pg-header{

            position: fixed;

            height: 48px;

            background-color: crimson;

            line-height: 48px;

            top:0;

            left:0;

            right:0;

        }

        .pg-body{

            margin-top: 50px;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .pg-header .menu{

            display: inline-block;

            padding: 0 10px 0 10px;

            color: #FFFFFF;

        }

        /*鼠标滑过变色*/

        .pg-header .menu:hover{

            background-color: darkred;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="logo">LOGO</a>

            <a class="menu">首页</a>

            <a class="menu">超市</a>

            <a class="menu">全球购</a>

        </div>

    </div>

    <div class="pg-body">

        <div class="w">内容</div>

    </div>

</body>

</html>

14-前端开发之CSS的更多相关文章

前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.c ...
前端开发之css
<!--页面中的组成部分通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息) css 属性/尺寸/边框/背景 1.css的尺寸属性,就是大小width max-width mi ...
前端开发之CSS篇四
一.相对定位二.绝对定位三.固定定位四.z-index 前言定位有三种:1.相对定位 2.绝对定位 3.固定定位这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
前端开发之CSS篇三
主要内容: 一.CSS布局之浮动二.清除浮动带来的问题三.margin塌陷问题和水平居中四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性二.盒模型三.padding属性四.border属性五.margin属性六.标准文档流七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
前端开发之CSS入门篇
一.CSS介绍和语法二.CSS引入方式三.基本选择器四.高级选择器五.伪类选择器六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
＃笔记＃移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
前端开发之JavaScript篇
一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...

随机推荐

【英语学习】2016.09.11 Culture Insider: Teacher's Day in ancient China
Culture Insider: Teacher's Day in ancient China 2016-09-10 CHINADAILY Today is the 32nd Chinese Te ...
java web学习总结(十一) -------------------基本概念使用Cookie进行会话管理
一.会话的概念会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...
Netty（一）引题
本文介绍Java BIO(同步阻塞IO),伪异步IO,NIO(非阻塞IO),AIO(异步IO)这四种IO的情况,并对不同IO模型作比较. 目录 1.BIO 2.伪异步IO 3.NIO 4.AIO 5. ...
Code First ：使用Entity. Framework编程(7) ----转发收藏
第7章高级概念 The Code First modeling functionality that you have seen so far should be enough to get you ...
移动页面div居中效果代码
在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看以下为HTML文件: <!DOCTYPE html> <html& ...
MySQL基础(非常全)
MySQL基础一.MySQL概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access ...
Oracle常用SQL查询
一.ORACLE的启动和关闭 1.在单机环境下要想启动或关闭oracle系统必须首先切换到oracle用户,如下: su - oracle a.启动Oracle系统 oracle>svrmgrl ...
linux 文件系统简介
linux文件系统简介文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基 ...
时空地图 TimeGIS.com 中生成等值线
在我的地图软件TimeGIS中加入了等值线生成的功能: 等值线的生成使用了wCoutour库, 代码根据这里的例子修改,http://www.06climate.com/view/1244.html ...
OC的runtime运行机制
什么是runtime runtime就是一套底层的c语言API(Application Programming Interface)里面包括很多强大实用的c语言类型.c语言函数. 实际上,平时我们编写 ...

14-前端开发之CSS