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属性相同的元素；

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

.cs1{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

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

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

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

</body>

</html>

2.1.4 id选择器

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

#cs1{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

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

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

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

</body>

</html>

<!--只有div1标签才有效果 -->

　　

2.2 组合选择器

2.2.1 多元素选择器

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

div,p{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

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

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

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

<span>SPAN</span>

</body>

</html>

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

　　

2.2.2 后代元素选择器

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

div p{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

<div id="cs1">

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

	<div class="cs3">

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

		<div class="cs3">

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

		</div>

	</div>

</div>

</body>

</html>

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

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

　　

2.2.3 子元素选择器

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

#outer>.c1{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

<div id="outer">

	<p class='c1'>我是p1标签</p>

	<div class="cs3">

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

		<div id="cs1">

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

		</div>

	</div>

</div>

</body>

</html>

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

<!--如需儿子被的后代变化-->

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

#outer>.c1{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

<div id="outer">

	<p class='c1'>我是p1标签</p>

	<div class="cs3">

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

		<div id="outer">

			<p class="c1">我是p3标签</p>

		</div>

	</div>

</div>

</body>

</html>

　　

2.2.4 毗邻元素选择器

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style>

#outer+.c1{

color: grey;

background-color: antiquewhite;

}

</style>

</head>

<body>

<p class='c1'>我是p1标签</p>

<div id="outer"> </div>

<p class='c1'>我是p2标签</p>

<p class="c1">我是p3标签</p> 

</body>

</html>

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

　　

2.3 属性选择器

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>页面</title>

<style >

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

</style>

<body>

	<input type='text' name='Hello'>

	<input type='text'>

	<input type='password'>

</body>

</html>

>

　　

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 背景属性

font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 238);">background-image: 背景图片；

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <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

向方框添加一个或多个阴影。

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定位的元素和其他元素重叠。

  • positon:relative

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

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

一般与absolute配合使用；

  • position:fixed

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

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

4.2 hover

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

4.3 overflow

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

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

4.4 z-index

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

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

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

4.5 opacity

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

python css概述的更多相关文章

  1. xhtml和css概述

    Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...

  2. Python语言——Python语言概述

    Python语言概述 计算机语言概述 语言:交流工具,沟通媒介 计算机语言:人和计算机交流的工具,翻译官 Python语言简述 Python是计算机语言的一种 Python编程语言: 代码:人类语言, ...

  3. 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  4. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  5. Web前端：1、HTML&CSS概述及结构

    万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...

  6. Python之路-python(css布局、JavaScript)

    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...

  7. Python之路-python(css、JavaScript)

    css JavaScript 一.CSS 分层: position: fixed;(固定到页面的具体位置) 例如:返回顶部 <!DOCTYPE html> <html lang=&q ...

  8. python css基本操作

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  9. CSS概述<选择器总结>

    概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...

随机推荐

  1. 前端学PHP之正则表达式基础语法

    前面的话 正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.在PHP中,正则表达式一般是由正规字符和一些特殊字符(类似于通配符)联合构成的一个文本 ...

  2. 【Zookeeper】源码分析之网络通信（一）

    一.前言 前面已经分析了请求处理链中的多数类,接着继续分析Zookeeper中的网络通信模块. 二.总体框图 对于网络通信模块,其总体框图如下所示 说明: Stats,表示ServerCnxn上的统计 ...

  3. iSCS协议介绍

    1.iSCSI 协议说明 一种在 TCP/IP上进行数据块传输的标准,由Cisco 和 IBM 两家发起,并且得到了各大存储厂商的大力支持.iSCSI 可以实现在 IP 网络上运行SCSI协议,使其能 ...

  4. XCel 项目总结 - Electron 与 Vue 的性能优化

    XCEL 是由凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选. XCEL 基于 Electron 和 Vue 2.0 进行开发,充分利用 E ...

  5. Unbutu14.04 切换ROOT用户后无法启用音频

    系统环境: Ubuntu14.04 x64 问题描述: 今天安装了Ubuntu14.04的64位系统,启用root用户登录后,观看视频时出现没有声音的现象. 问题原因: Ubuntu安装后默认root ...

  6. apicloud下拉刷新

    //下拉 apiready = function () { var param = {}; toDoRequest(); param.loadingImgae = 'widget://image/re ...

  7. CoreAnimation 目录

    CoreAnimation 目录 CoreAnimation 开篇 CoreAnimation 寄宿图 CoreAnimation 图层几何学 CoreAnimation 视觉效果

  8. Spark2.1集群安装（standalone模式）

    机器部署 准备三台Linux服务器,安装好JDK1.7 下载Spark安装包 上传spark-2.1.0-bin-hadoop2.6.tgz安装包到Linux(intsmaze-131)上 解压安装包 ...

  9. 剑指offer：重建二叉树

    重建二叉树的前置知识: 0.遍历二叉树: (1)前序遍历:根左右 --> 先访问根节点,再前序遍历左子树,最后前序遍历右子树: (2)中序遍历:左根右 --> 先中序遍历左子树,再访问根节 ...

  10. 老司机实战Windows Server Docker：3 单节点Windows Docker服务器简单运维（上）

    经过上两篇实战Windows Server Docker系列文章,大家对安装Windows Docker服务以及如何打包现有IIS应用为docker镜像已经有了基本认识.接下来我们来简单讲讲一些最基本 ...