当前位置：文档之家 › CSS层叠样式表学习笔记

CSS层叠样式表学习笔记

  • 格式：doc
  • 大小：151.00 KB
  • 文档页数：8

尺寸
CSS语法由三部分构成：选择器、属性和值；选择器{属性：值} eg. body {color: blue;} 提示：如果值为若干单词，则要给值加引号；
外部样式表：
用<link>标签链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件mystyle.css 中读到样式声明，并根据它来格式文档。

内部样式表：
可以使用<style> 标签在文档头部定义内部样式表；
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS Table 属性
CSS 表格属性允许你设置表格的布局。

（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍CSS 中表本身如何布局。

）
CSS 边框属性
"CSS" 列中的数字指示哪个CSS 版本定义了该属性。

CSS 定位属性允许你对元素进行定位。

CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。

同样，还允许你增加行间距。

伪元素的语法：
CSS 类也可以与伪元素配合使用：。

合集下载

CSS层叠样式学习总结

CSS层叠样式学习总结

css3 总结01前缀∙chrome: -webkit-∙safari: -webkit-∙firefox: -moz-∙ie: -ms-∙opera: -o-书写的时候应该先用有前缀的样式，再用无前缀的样式颜色∙rgb(red, green, blue);∙rgba(red, green, blue, opacity[0-1]);∙hsl(色度，饱和度，亮度)；色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；饱和度百分比值，100%表示完全显示该颜色；亮度百分比值，0%代表黑色，100%代表白色，50%平均值圆角border-radius: 20px;//水平，垂直border-radius: 20px，20px;//左上，右上，右下，左下border-radius: 20px，20px 20px 20px;下拉阴影//水平；垂直；模糊直径；颜色box-shadow: 10px 5px 15px #000;//内阴影box-shadow: 10px 5px 15px #000 inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;chromw:-webkit-;safari:-webkit-;ie>=9文本阴影//水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff;渐变默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向linear-gradient(#ccc, #ddd, white);//设定一个倾斜度linear-gradient(-45deg, #ccc, #fff);//水平渐变linear-gradient(left, #ccc, #fff);//设置颜色停止值linear-gradient(white, #ddd 20%, black);选择器//选中的第一个元素:first-child//选中的最后一个元素:last-child//选中的元素是其父元素的唯一子元素:only-child//选中当前URL的哈希中的目标元素:target//选中复选框以被勾选的元素:checked∙nth-child选择器nth-child(n);nth-child(even);/nth-child(2n);nth-child(odd);/nth-child(2n+1);∙直接后代选择器>∙否定选择器:not(.current)ie>=9过渡transition: 持续时间，属性，[动画类型];//多个动画transition: 2s opacity, .5s height ease-in;定时函数种类∙linear∙ease-in∙ease-out∙ease-in-out例子div {background: pink;width: 50px;height: 50px;-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */transition: 2s width ease-in, 2s height ease-out;}div:hover{width: 100px;height: 150px;}div {position: absolute;left: 10px;-moz-transition: 2s left-webkit-transition: 2s left;-o-transition: 2s left ;transition:2s left;}div:hover{position: absolute;left:100px;}firefox:-moz-; chrome:-webkit-; safari: -webkit-; ie>=10; opear: -o-;css3 总结03∙box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。

type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。

⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。

是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。

《网页制作》第四讲--层叠样式表CSS

《网页制作》第四讲--层叠样式表CSS

6
4.1 CSS样式的定义和使用 CSS样式的定义和使用
4.1.3.1 选择符
• CSS主要有三种选择符： CSS主要有三种选择符： 主要有三种选择符 超文本标记选择符（ selector） * 超文本标记选择符（HTML selector） 如：A{color:red},P{text:3em} 类选择符(class * 类选择符(class selector) 例如：4class选择符 选择符.htm 例如：4class选择符.htm font.html{color:red} font.css{color.blue} .name{{font-size:small} ID选择符 选择符（ selector） * ID选择符（ID selector） indent3em{text#indent3em{text-indent:3em} ID=indent3em>文本缩进 文本缩进3em</P> <P ID=indent3em>文本缩进3em</P>
7
CSS样式的定义和使用 4.1 CSS样式的定义和使用
CSS属性 4.1.3.2 CSS属性
• • • • • • 字体属性 文本属性 颜色和背景属性 BOX模型属性 BOX模型属性 浮动属性 定位属性和高度属性
8
CSS样式的定义和使用 4.1 CSS样式的定义和使用
CSS属性 4.1.3.2 CSS属性
网页与多媒体技术
关继夫
办公室：教育技术楼101室 办公室：教育技术楼 室 E-mail：guanjifu@ ：
教育技术与信息中心
1
第四章： 第四章：CSS样式表 样式表
CSS样式的定义和使用 4.1 CSS样式的定义和使用 CSS过滤器效果 4.2 CSS过滤器效果 4.3 CSS样式在dreamweaver中的应用 CSS样式在dreamweaver中的应用 样式在dreamweaver
3.5CSS样式表

3.5CSS样式表

CSS 样式表概念（cascading style sheet 层叠样式表）作用：是一组格式设置规则，用于控制web 页面的外观，可以一次性对多个文档中的所有样式进行控制可以将网页和格式分离(1)可以将页面内容与表现形式分离(2)1.优点改动后对应自动更新样式(1)更强的控制能力(2)更快的下载速度(3)更简练的HTML 代码(4)缩短浏览器的加载时间(5)2.选择器类型类（可应用于任何HTML 元素）：又称“自定义CSS 规则”，命名时以“.”开头(1)ID （仅应用于一个HTML 元素）：为标有特定ID 的HTML 指定特定样式，命名时以“#”开头(2)标签（重新定义HTML 元素）：重新定义HTML 标签的默认格式，标签定义好后，马上生效（自动）(3)复合内容（基于选择的内容）：定义同时影响两个或多个标签、类、ID 的复合规则，用于标记组合a ：link ：定义链接目前未被访问时的样式①.a ：visited ：定义链接被访问过后的样式②.a ：hover ：定义鼠标指针移动到超链接上的状态③.a ：active ：定义鼠标按下不放时的显示状态④.(4)3.样式面板：（shift+F11）显示模式全部模式：显示当前页面中用到的所有CSS 规则①.当前模式：显示当前所选内容样式的摘要②.(1)视图样式转换按钮显示类别视图①.显示列表视图②.只显示设置属性③.(2)功能按钮附加样式表①.新建CSS 规则②.编辑样式③.禁用/启用CSS 属性④.删除样式⑤.(3)4.一.3.5.1 层叠样式表创建CSS 样式外部CSS 样式表=新建样式表（独立文件保存，扩展名*.css ）实现网站风格统一化1.内部/嵌入式CSS 样式表=仅限该文档（保存在<head>中<style>内）一般只能用于当前网页元素2.一.应用CSS 类样式选择对象，在CSS 面板上右击相应的类样式，选择应用1.选择对象，在属性面板的样式列表或类列表中选择相应类样式2.二.CSS 规则定义属性类型：字体、字号、颜色、行高、修饰1.背景：背景色、背景图像、背景的定位、重复2.区块：单词间距、文本缩进、对齐方式3.方框：各元素的高、宽、浮动、填充、边界4.边框：边框的粗细、颜色、边框线的类型5.列表：自定义的列表图像、位置6.定位：各元素定位的类型、位置、大小7.扩展：分页、光标样式、使用滤镜8.过渡：变化速度9.三.3.5.4 CSS 样式表的设置与使用。