1. 概述

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

行内式：

在标签中使用 style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔；

<div style="background-color:darkgrey;height: 100px;width:100px">我是div

</div>

嵌入式：

在页面中嵌入 < style type="text/css"> </style >块

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

div{

background-color:darkgrey;

height: 100px;

width:100px;

}

</style>

</head>

链接式：

将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中

<head>

<meta charset="UTF-8">

<title>Title</title>

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

</head>

导入式：

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

@import"mystyle.css"; #此处要注意.css文件的路径

</style>

</head>

注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式

2. CSS选择器

2.1 基础选择器

2.1.1 通用元素选择器

通用元素选择器，匹配任何元素

*{

color: darkgrey;

}

2.1.2 标签选择器

匹配所有使用XX标签的元素；

例如，需要选择所有标签为div的元素设置样式

div{

color: grey;

background-color: antiquewhite;

}

2.1.3 class选择器

.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；

.cs1{

color: grey;

background-color: antiquewhite;

}

<div class="cs1">我是div1标签</div>

<div class="cs1">我是div2标签</div>

<p class="cs1">我是p标签</p>

<!-- 以上三个标签都会变成.cs1的样式 -->

2.1.4 id选择器

#info或E#info :id属性选择器，匹配所有id属性等于info的元素

#cs1{

color: grey;

background-color: antiquewhite;

}

<div id="cs1">我是div1标签</div>

<div class="cs1">我是div2标签</div>

<!-- 以上标签，只有id=cs1的标签会变成#cs1的样式-->

2.2 组合选择器

2.2.1 多元素选择器

E,F：多元素选择器，同时匹配所有E标签元素或F标签元素，E和F之间用逗号分隔

div,p{

color: grey;

background-color: antiquewhite;

}

<div id="cs1">我是div1标签</div>

<p class="cs1">我是p标签</p>

<span>我是span</span>

<!-- 以上标签，除span标签，即div和p标签都会变成设置的样式-->

2.2.2 后代元素选择器

E F：后代元素选择器，匹配所有属于E标签元素后代的F标签元素，即所有类似形式的所有后代，子子孙孙，E和F之间用空格分隔;

div p{

color: grey;

background-color: antiquewhite;

}

<div id="cs1">

　　<p class="cs1">我是p1标签</p>

　　<div class="cs3">

　　　　<p class="cs1">我是p2标签</p>

　　　　<div class="cs2">

　　　　　　<p id="cs1">我是p3标签</p>

　　　　</div>

　　</div>

</div>

<!-- 以上标签，p1、p2、p3均会变成设置的样式 -->

<!-- 扩展：可以结合基础选择器使用，例如div #cs1，div .cs1等 -->

2.2.3 子元素选择器

E > F ：子元素选择器，匹配所有E元素的子元素F，只匹配到子元素，子元素的子元素匹配不到;

<style>

#outer>.c1{

color: aqua;

}

</style>

<div id="outer">

    <p class="c1">p1.....</p>

    <div class="c2">

        <p class="c1">p2....</p>

    </div>

</div>

<!-- 以上标签，p1会变成设置的样式，p2不会变，即儿子辈的会变，儿子辈的后代不会变-->

2.2.4 毗邻元素选择器

E + F:毗邻元素选择器，匹配所有紧随E元素之后的同级元素F ，即只匹配挨着的下一个F元素，如不相邻也不起作用;

<style>

#outer+.c1{

color: aqua;

}

</style>

<p class="c1">p1....</p>

<div id="outer">

</div>

<p class="c1">p2.....</p>

<div class="c1">div1...</div>

<!-- 以上标签，p1不会变更样式，p2为挨着的下一个class=c1的元素，所以p2会变更样式，div1的class属性也满足但并未挨着id=outer的元素，故不起作用 -->

2.3 属性选择器

根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        input[name="James"]{width: 20px;height: 20px;}

    </style>

</head>

<body>

    <input type="text" name="James">

    <input type="text">

    <input type="password">

</body>

3. 常用属性

3.1 颜色属性

color：

①英文单词形式，例如：red，yellow

②编码形式，例如：#cc3399，如双重可简写#c39

③基调颜色透明度设置，例如：rgb（255,255,255,0.5），red、green、blue三色透明度设置,最后一个值设置透明度

3.2 字体属性

font-size: 20px/50%/larger 设置字体大小；

font-family:'Lucida Bright' 文本的字体系列；

font-weight: lighter/bold/border/ 字体的粗细；

font-style:normal/oblique/italic 文本的字体样式；

3.3 背景属性

background-color: 背景底色；

background-image: 背景图片；

background-repeat：平铺方式，no-repeat 不平铺，repeat 平铺满；

background-size: 图片大小设置，auto；

background-position：center 上下左右居中；left center左侧上下居中；top，bottom，right类似；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 100px;"></div>

    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>

</body>

</html>

3.4 文本属性

text-align：center 文本居中

line-height：xxpx；行高，针对文本处理

width：xxpx；宽 %50

height：xxpx；高 %50

text-indent：xxpx 首行缩进，基于父元素

letter-spacing：xxpx；字母与字母之间距离

word-spacing：xxpx ；单词之间距离

direction：rt1

text-transform：capitalize；将单词首字母大写

min-height:设置默认最小高度

height：auto！important 以此样式为准

vertical-align：xxpx;垂直居中

opacity：0.3 透明度

3.5 CSS样式边框

border-style：solid；边框样式

border-color：red；边框颜色

border-width：1px；边框宽度

border-radius：20%；边框变成圆角

border	在一个声明中设置所有的边框属性。
border-bottom	在一个声明中设置所有的下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-color	设置四条边框的颜色。
border-left	在一个声明中设置所有的左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	在一个声明中设置所有的右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-style	设置四条边框的样式。
border-top	在一个声明中设置所有的上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。
border-width	设置四条边框的宽度。
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。
border-bottom-left-radius	定义边框左下角的形状。
border-bottom-right-radius	定义边框右下角的形状。
border-image	简写属性，设置所有 border-image-* 属性。
border-image-outset	规定边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice	规定图像边框的向内偏移。
border-image-source	规定用作边框的图片。
border-image-width	规定图片边框的宽度。
border-radius	简写属性，设置所有四个 border-*-radius 属性。
border-top-left-radius	定义边框左上角的形状。
border-top-right-radius	定义边框右下角的形状。
box-decoration-break
box-shadow	向方框添加一个或多个阴影。

简写方式：

border: solid 1px red

3.6 CSS样式浮动

正常文档流：将元素（标签）在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；

脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；

float 浮动标签属性（非完全脱离）：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。

float：left，right，both

清除浮动： clear : none | left | right | both

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

<style>

    #div4{

        border:solid 1px lavender;

        background-color: rebeccapurple;

        height: 100px;

    }

    #div1{

        background-color: darkolivegreen;

        height: 100px;

        width: 980px;

        margin: auto;

    }

    #div2{

        border-left: solid 1px lavender;

        height: 100px;

        width: 100px;

        background-color: darkgray;

        float: left;

    }

    #div3{

        border-left: solid 1px lavender;

        height: 100px;

        width: 100px;

        background-color: darkgray;

        float: left;

    }

    #clear{

        clear:both;

    }

</style>

<div id="div4">

    <div id="div1">

        <div id="div2">div2</div>

        <div id="div3">div3</div>

    </div>

    <div id="clear"></div>

</div>

注：div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动

清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏

overflow：auto;不光隐藏并出现滚动条

3.7 CSS样式display

块级标签和行内标签相互转换

<body>

    <div style="background-color: red;display: inline">块级</div>

    <span style="background-color: #2459a2;display: block">行内</span>

</body>

注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

<body>

    <span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行内</span>

    <div style="background-color: red;display: inline">块级</div>

</body>

注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

3.8 CSS样式边距

外边距margin

<body>

    <div style="border: 2px solid red;height: 70px;">

        <div style="background-color: green;height: 50px;

        margin-top: 25px;"></div>

    </div>

</body>

内边距padding

<body>

    <div style="border: 2px solid red;height: 70px;">

        <div style="background-color: green;height: 50px;

        padding-top: 25px;"></div>

    </div>

</body>

4 其他

4.1 position

4.1.1 介绍

Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。

1、主要的值：

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static ：默认值；默认布局。

2、辅助属性：

position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：

①left ：表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。

上面属性的值可以为负，单位：px 。

4.1.2 定位方式

position:absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>；

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

h2

{

position:absolute;

left:100px;

top:150px;

}

positon:relative

相对定位元素的定位是相对其正常位置。

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

一般与absolute配合使用；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

        <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>

    </div>

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

        <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>

    </div>

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

        <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>

    </div>

</body>

</html>

position:fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            height: 48px;

            background-color: black;

            color: #dddddd;

            position: fixed;

            top:0;

            right: 0;

            left: 0;

        }

        .pg-body{

            background-color: #dddddd;

            height: 5000px;

            margin-top: 50px;

        }

    </style>

</head>

<body>

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

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

</body>

</html>

4.2 hover

适用于光标（鼠标指针）指向一个元素，但此元素未被激活时的样式.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            position: fixed;

            right: 0;

            left: 0;

            top: 0;

            height: 48px;

            background-color: #2459a2;

            line-height: 48px;

        }

        .pg-body{

            margin-top: 50px;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .pg-header .menu{

            display: inline-block;

            padding: 0 10px 0 10px;

            color: white;

        }

        /*当鼠标移动到当前标签上时，以下css属性才生效*/

        .pg-header .menu:hover{

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

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

            <a class="menu">全部</a>

            <a class="menu">42区</a>

            <a class="menu">段子</a>

            <a class="menu">1024</a>

        </div>

    </div>

    <div class="pg-body">

        <div class="w">a</div>

    </div>

</body>

</html>

4.3 overflow

overflow属性指定如果内容溢出一个元素的框，会发生什么。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 200px;width: 300px;overflow: auto">

        <img src="http://img05.tooopen.com/images/20140604/sy_62331342149.jpg">

    </div>

    <div style="height: 200px;width: 300px;overflow: hidden">

        <img src="http://img05.tooopen.com/images/20140604/sy_62331342149.jpg">

    </div>

</body>

</html>

4.4 z-index

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

4.5 opacity

设置一个div元素的透明度级别：0-1

div

{

opacity:0.5;

}

web前端基础知识-（二）CSS基本操作的更多相关文章

web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
文成小盆友python-num14 － web 前端基础 html ，css, JavaScript
本部分主要内容 html - 基础 css - 基础一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页 ...
web前端基础知识-（三）JavaScript基本操作
JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. JavaScrip ...
web前端基础知识-（一）html基本操作
1. HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样 ...
web前端基础知识-（七）Django进阶
通过上节课的学习,我们已经对Django有了简单的了解,现在来深入了解下~ 1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 u ...
web前端基础知识 - Django进阶
1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 url(r'^index/(\d*)', views.index), url( ...
web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...

随机推荐

Nagios学习实践系列——产品介绍篇
Nagios介绍 Nagios是一款功能强大.优秀的开源监控系统,它能够让你发现和解决IT架构中存在的问题,避免这些问题影响到关键业务流程. Nagios最早于1999年发布,它在开源社区的影响力是相 ...
小心SQL SERVER 2014新特性——基数评估引起一些性能问题
在前阵子写的一篇博文"SQL SERVER 2014 下IF EXITS 居然引起执行计划变更的案例分享"里介绍了数据库从SQL SERVER 2005升级到 SQL SERVER ...
阿里云centos安装svn和submin
概述没有找到可以让团队方便使用的云盘,暂时搭建一个svn凑合用一下 svn有三种安装方式安装方式服务程序服务协议用户和密码授权系统配置 svn独立安装 svnserve svn pass ...
Memcached学习笔记
[TOC] 前言此为学习笔记汇总,如有纰漏之处,还望不吝指出,谢谢. 启动流程调用settings_init()设定初始化参数从启动命令中读取参数来设置setting值设定LIMIT参数开始 ...
hortonworks2.5.3 install step log
1.创建本地YUM源,下载TAR.GZ HDP,HDP-UTILS,AMBARI介质安装HTTPD,在/VAR/WWW/HTML/下创建三个相应的目录,把以上解压的三个目录链接过来在三个目录中执行命令 ...
ZBrush中的动态网格该怎么进行运用
DynaMesh是ZBrush最新的基础模型创建工具,该命令用于基本模型的起稿到中模的制作.使用DynaMesh完全不启用考虑模型的拓扑,可以从一个图形拉扯出整个模型的分支,本文将以一个实例简单介绍Z ...
HTTPS----安全超文本传输协议
HTTPS协议详解HTTPS以保密为目标研发,简单讲是HTTP的安全版.其安全基础是SSL协议,因此加密的详细内容请看SSL.全称Hypertext Transfer Protocol over Se ...
一段拼装sql的小代码
/** * 单表查询 * * className:实体类的名字 * vals:查询的属性 * pNames:条件的名字 * pVals:条件的值 */ @Override public List< ...
java1.8常用的函数式接口
//常用函数式接口 final ; //num++; //第一个为传入参数的类型:第二个为返回数据的类型 Function<int[],String> function = (from) ...
linux系统下的权限知识梳理
下面对linux系统下的有关权限操作命令进行了梳理总结,并配合简单实例进行说明.linux中除了常见的读(r).写(w).执行(x)权限以外,还有其他的一些特殊或隐藏权限,熟练掌握这些权限知识的使用, ...

web前端基础知识-（二）CSS基本操作