css快速学习
来源:互联网 发布:社会网络的同义词 编辑:程序博客网 时间:2024/06/05 18:52
一、CSS 概述(了解)
- CSS: Cascading Style Sheet 层叠样式表
- CSS 作用就是给html页面标签添加各种样式
- 为什么用CSS
- html的缺陷:
- 1,不能够适应多种设备
- 2,要求浏览器必须智能化足够庞大
- 3,数据和显示没有分开
- 4,功能不够强大
- css的有点:
- 1,使数据和显示分开
- 2,降低网络流量
- 3,使整个网站视觉效果一致
- 4,使开发效率提高了
- html的缺陷:
二、CSS 语法
p{color:red;}选择器{属性名:属性值;} 选择器后一定是大括号,属性名后必须用冒号隔开,属性值后用分号,属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式
css代码理论上位置是任意的,但通常写在style标签里
- a.行级样式表:采用style属性,范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
- b.内嵌样式表:采用
<style>
标签完成。范围针对此页面 c.外部样式表:采用建立样式表文件。针对多个页面。
- 采用
<link>
标签eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 采用impor,必须写在
<style>
标签中,并且必须是第一句eg:@import url(a.css);
两种引入方式的区别:外部样式表中不能写
<link>
标签,但是可以写import语句- 采用
四、CSS选择器
1,基本选择器
a. 标签选择器:指的就是选择器的名字代表html页面上的标签
p{
color:red;
border:1px dashed greee;
}b. 类选择器:规定用原点来定义
优点:灵活eg: .one{background-color:#ff0099; }
c. ID选择器:规定用#来定义
eg: #one{cursor:hand; }
区别:标签选择器针对的是页面上的一类标签,类选择器可以供多种标签适用,ID选择器是值供特定的标签(一个),ID是此标签在此页面上唯一标识d. 通用选择器:用*定义,代表页面上的所有标签。
*{
font-size:30px:
margin-left:0px;
margin-top:0px;
}
2,扩展择器
a. 组合选择器:采用逗号隔开
eg: p,h1,h2,.one,#two{color:red ; }
b. 关联选择器(后代选择器):采用空格隔开
eg: h4 span i{color:red ; }
表示h4标签中的span标签中的i标签的样式,h4和span和i标签不一定是紧挨着的。c. 伪类选择器
1)静态伪类:规定是用:来定义,只有两个,只能用于超链接。
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色eg:a:link{color:red ;}a:visited{color:yellow;}
注意: a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚),a{}定义的样式针对所有的超链接(包括锚)
2)动态伪类:针对所有标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
五、CSS各种选择器的冲突(掌握)
CSS样式的冲突: 1.ID选择器 > 类选择器 > 标签选择器 2.行级样式表 > 内嵌样式表 > 外部样式表 外部样式表的ID选择器 > 内嵌样式表的标签选择器 原则: 就近原则
六、CSS的各种属性(掌握)
css的单位
- a. 绝对单位 1in=2.54cm=25.5mm=72pt=6pc(pt是点或者磅,pc是派卡)
- b. 相对单位:px,em(印刷单位相当于12个点),%(相对周围的文字)
字体设置
p{ font-size:50px; /*字体大小*/ font-style:italic ; /*斜体*/ font-weight:bold; /*粗体*/ font-family:幼圆; /*字体类型*/ font-variant:small-caps; /*小写变大写*/ }
文本设置
p{ letter-spacing:0.5cm ; /*字母间距*/ word-spacing:1cm; /*单词间距*/ text-align:center; /*在所包含容器的中间*/ text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/ text-transform:lowercase; /*单词字体大小写*/ color:red ; }
背景设置
body{ background-color:#ff99ff ; /*背景颜色*/ background-image:url(images/2.gif) ; /*背景图片*/ background-repeat: no-repeat; /*no-repeat不要平铺,repeat-x,横向平铺,repeat-y 纵向平铺*/ background-position:center right; /*背景位置*/ background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动,scroll 不动*/ }
列表设置
ul li{ list-style:none; /*列表前样式*/ list-style-image:url(images/2.gif) ; /*列表项前图片*/ margin-left:80px; }
盒子模型(border margin padding)
padding:是内容到边的距离border: 是边的粗细margin:是控件到控件的距离
定位设置(position,float,clear,z-index)
#d{ position: absolute; /* 1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流 2.相对定位: 相对的是自己在顺序流中原来的位置 */ left:100px; /*横坐标*/ top:100px; /*纵坐标*/ border:1px solid red ; width:100px; height:100px; background-color:#ff66ff; }#d1{ position: relative; /*相对位置*/ left:100px; top:100px; border:1px solid green ; width:100px; height:100px; background-color:#339900; }span{ position: relative; left:20px; top:20px; }
z-index:值任意,值越大离我们越近
float : 浮动 overflow: 超出范围怎么办
- 鼠标样式设置(cursor)
七、滤镜(了解)
css 种使用方式
样式表放在不同的地方,产生作用的范围也不同。大致来说,样式表分为内联样式表和外联样式表,即有页面内放置、外部引用、外部导入三种方式。
行间样式表
行间样式表示指将css样式编码写在html标签中,格式如下:<h1 style="font-size:12px;color:#000FFF">我的CSS样式。</h1>
行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=”“之中。这是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。
内部样式表
内部样式表与行间样式表相似都是把CSS代码写在HTML页面中,稍微不同的是前者可以将样式表放在一个固定的位置,格式如下 :<html> <head> <title>内部样式表</title> <style type="text/css"> h1{font-size:12px; color:#000FFF } </style> </head> <body> <h1>我的CSS样式。</h1> </body></html>
内部样式表编码是初级的应用形式,不能达到跨页面使用所以不适合使用。
外部样式表
外部样式表是CSS应用中最好的一中形式,它将CSS样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码的最大限度的重用及网站文件的最优化配置,格式如下:<html> <head> <title>外部样式表</title> <link rel="stylesheet" rev="stylesheet" href="style.css"> </head> <body> <h1>我的CSS样式。</h1> </body></html>
在style.css中的代码为
h1{font-size:12px; color:#000FFF }
我们在中使用了标签来调用外部样式表文件。将link指定为stylesheet方式,并使用了href=”style.css”指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。
- CSS 快速学习建议
- css快速学习
- CSS快速学习1
- css快速学习
- WEB程序员学习JS快速指南--CSS
- 快速学习html、css的经典笔记
- 快速学习html、css的经典笔记
- CSS快速学习6:vertical-align讲解
- CSS快速学习7:定位锚点
- CSS快速学习9:浏览器兼容
- CSS快速学习10:高度自适应
- CSS快速学习3:文本、背景等属性
- CSS快速学习4:浮动和盒模型
- CSS快速学习5:文本溢出和XHTML元素分类
- CSS快速学习:几种导航条案例
- CSS学习笔记-附加篇(CSS盒子模式-DIV布局快速入门)
- DIV+CSS学习手册 DIV+CSS之一 DIV排版快速入门
- CSS快速入门
- 优秀博客
- MongoDB for Java Programmer ——2
- Service与Activity之间通信的几种方式
- 前端构建工具gulp入门教程
- flexbox相关
- css快速学习
- 优秀博客
- 迷宫问题bfs解决
- Java多线程编程(第三章)
- c++作业7
- crush 核心函数 crush_do_rule
- 适配器模式
- 大型网站的架构设计详解3
- 命令行mysqld启动不了数据库