本文共 10616 字,大约阅读时间需要 35 分钟。
CSS概念:Cascading Style Sheet 层叠样式表
选择器{ 属性1:属性值;//声明1 属性2:属性值;//声明2 ...}
注意:CSS的最后一条声明后的";“可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束都要写上”;"。
Style 标签在HTML文档中的位置 , 在<head>
和 </head>
之间
Title 我的标题一
我的标题二
运行:
使用style属性引入CSS样式
案例:
Title Hello,css
Hello,css
运行:
CSS代码写在<head>
的<style>
标签中
案例:
Title Hello,world!
运行:
准备工作:首先需要创建一个resources目录,在resources下创建css目录,在css目录下创建stylesheet样式表文件
css文件:
/*.css文件声明选择器的样式*/div{ color: chocolate; font-size: 100px;}
Title Hello,CSS!
运行:
Title Hello,CSS!
链接式与导入式的区别:
<link/>
标签属于XHTML,@import
是属于CSS2.1<link/>
链接的CSS文件先加载到网页当中,再进行编译显示@import
导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中@import
是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的行内样式 > 内部样式表 > 外部样式表
案例: Style.css文件:div{ color: yellow; font-size: 100px;}
Title Hello,CSS!
运行:
HTML标签作为标签选择器的名称
<h1>
…<h6>
、<p>
、<img/>
等等格式:
选择器{ 属性1:属性值;//声明1 属性2:属性值;//声明2 ...}
格式:
.class{属性:属性值;} <标签名 class="类名称"> 标签内容 标签名>
案例:
Title 你好啊 初次见面
请多多指教好好学习,天天向上加油
运行:
格式:
#id名字{属性:属性值;...} <标签名 class="类名称"> 标签内容 标签名>
Title 哈哈
呵呵嘻嘻嗯嗯
运行:
案例:
Title 好好学习,天天向上
运行:
假设有这样一个层次结构的网页:
格式:E F{声明;}
body p{ background: red; }
格式:E>F{声明;}
body>p{ background: pink; }
格式:E+F{声明;}
.active+p { background: green; }
格式:E~F{声明;}
.active~p{ background: yellow; }
Title 1
2
3
4
5
5.1
5.2
5.3
6
7
8
9
10
11
12
运行:
例如:
ul li:first-child{ background: red;} ul li:last-child{ background: green;}p:nth-child(1){ background: yellow;} p:nth-of-type(2){ background: blue;}
Title 标题
1
2
3
运行:
案例:
Title
运行:
案例:
span标签 一寸 光阴一寸 金
寸金 难买寸光阴
运行:
属性名 | 含义 | 举例 |
---|---|---|
font-family | 设置字体类型 | font-family:“隶书”; |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体风格 | font-style:italic; |
font-weight | 设置字体的粗细 | font-weight:bold; |
font | 在一个声明中设置所有字体属性 | font:italic bold 36px “宋体”; |
属性 | 含义 | 举例 |
---|---|---|
color | 设置文本颜色 | color:#00C; |
text-align | 设置元素水平对齐方式 | text-align:right; |
text-indent | 设置首行文本的缩进 | text-indent:20px; |
line-height | 设置文本的行高 | line-height:25px; |
text-decoration | 设置文本的装饰 | text-decoration:underline; |
vertical-align | 设置文本对齐 | vertical-align : middle |
#a{ font-family: 楷体;}#b{ font-style: italic;}/* text-indent文本首行缩进 */.sj{ text-indent: 2em;}/* text-shadow文本阴影 */h1{ text-shadow: green -1px 1px 10px;}
Title CSS(层叠样式表)
摘自: 百度百科
概念:层叠样式表(英文全称:Cascading Style Sheets)
是一种用来表现HTML(标准通用标记语言的一个应用) 或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地 对网页各元素进行格式化
运行:
伪类名称 | 含义 | 示例 |
---|---|---|
a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
设置伪类的顺序:a:link->a:visited->a:hover->a:active
案例:Title 点击进入...
运行:
案例:
Title
运行:
background:#C00 url(../image/kuangshen.jpg) 205px 10px no-repeat;
背景尺寸 : background-size
属 性 名 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
Gradient | 10+ | 19.0+ | 26.0+ | 12.1+ | 5.1+ |
语法:
-webkit-linear-gradient ( position, color1, color2,…)
Title
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
属性 | 说明 | 示例 |
---|---|---|
border-top-color | 上边框颜色 | border-top-color:#369; |
border-right-color | 右边框颜色 | border-right-color:#369; |
border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
border-left-color | 左边框颜色 | border-left-color:#efcd56; |
border-color | 四个边框为同一颜色 | border-color:#eeff34; |
boder-color | 上、下边框颜色:#369 左、右边框颜色:#000 | border-color:#369 #000; |
border-color | 上边框颜色:#369左、右边框颜色:#000下边框颜色:#f00 | border-color:#369 #000 #f00; |
border-color | 上、右、下、左边框颜色:#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
border-width:边框粗细
border-style:边框样式
边框简写
外边距妙用
网页居中对齐
margin:0px auto;
网页居中对齐的必要元素
padding
border-radius: 20px 10px 50px 30px;(四个属性值按顺时针排列)
Title 边框演示
这是实线红色边框
这是实线绿色边框
细边框
中等宽度边框
粗边框
无边框
点线边框
虚线边框
实线边框
双边框
沟槽边框
脊边框
嵌入边框
突出边框
隐藏边框
圆角边框演示
盒子模型演示
这是内间距为30px,外间距为25px和35px的绿蓝色边框的盒子。盒子阴影演示
标准文档流的组成
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立
值 | 说明 |
---|---|
block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 |
inline | 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符 |
inline-block | 行内块元素,元素既具有内联元素的特性,也具有块元素的特性 |
none | 设置元素不会被显示 |
块级元素与行级元素的转变(block、inline)
控制块元素排到一行 (inline-block)
控制元素的显示和隐藏(none)
可以使用什么属性使块元素排在一行?
float属性
属性值 | 说明 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认值。元素不浮动,并会显示在其文本中出现的位置 |
Title 哈哈哈哈哈哈哈啊哈
值 | 说明 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左、右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
Overflow属性
属性值 | 说明 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在盒子之外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
案例:
Title overflow 属性
hidden:
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。scroll:
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。auto:
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。visible (默认):
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
运行:
position属性
相对定位的特性
相对定位的使用场景
Title 正常位置
向左移动
向右移动
案例:
Title 我的标题
用绝对定位,一个元素可以放在页面上的任何位置。 这个标题距离左边的页面100px和距离页面的顶部150px。
运行:
Title 哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
用于调整元素定位时重叠层的上下位置
属性 | 说明 | 举例 |
---|---|---|
opacity:x | x值为0~1,值越小越透明 | opacity:0.4; |
filter:alpha(opacity=x) | x值为0~100,值越小越透明 | filter:alpha(opacity=40); |
转载地址:http://akwm.baihongyu.com/