- 简介
CSS主要目的是给HTML标记添加各种各样的表现。比如文字样式,背景,文本样式,链接样式。 - 语法格式
一个CSS由选择器和格式声明语句构成。h1{ color:red; font-size:14px; }
- 选择器:
1、基本选择器
(1)*选择器:通配符
将匹配的所有HTML标记,所有的标记都会改变。*{ color:red;}
(2)标签选择器,将匹配指定的HTML标记。h1{ color:red;}
(3)class选择器,给一类HTML标记加样式。
必须以点开头,后跟class属性值。HTML标记的class属性值不能以数字开头。.myClass{ color:red; background-color:yellow;}
(4)id选择器
给指定的id的元素添加样式,网页中HTML标记的id属性值必须是唯一的。
每一个HTML标记都有一个id的公共属性,id属性一般给js用,class属性只能给CSS使用,id选择器的名称必须以“#“开头,后跟HTML标记的id属性值。#myID{ color:red; background-color:yellow;}
2、组合选择器
(1)多元素选择器
给多个元素加同一个样式,多个选择器之间用“,”隔开。h1,div,.p2{Color:red;}
(2)后代元素选择器
给某一标签的某一个后代元素加样式,选择器之间用空格隔开。div .myClass{color:red;}
(3)子元素选择器
给某个元素的子元素加样式div> .myClass{color:red;}
- CSS注释
CSS注释:/*内容*/
HTML注释:<!—内容—>
- CSS尺寸属性
width:元素的宽度,一定用px单位
height:元素的高度 - CSS字体属性
Font-size:文字大小
font-family:字体
font-style:斜体,取值:italic
font-weihgt 粗体,取值:bold - CSS文本属性
color:文本颜色。
text-decoration:文本修饰线,取值:none(无)、underline(下滑线)、overline(上划线)、line-through(删除线)。
text-align:文本水平对齐方式,取值:left、center、right。
line-height:行高,可以用固定值,也可以用百分比。
text-indent:首行缩进。
letter-spacing:字间距。 - CSS伪选择器
给超链接加样式
1、正常状态(:link):鼠标没有放上链接的状态。
2、放上状态(:hover):鼠标放上链接的状态。
3、激活状态(:active):按住鼠标左键不动的状态(短暂)。
4、访问过状态(:visited):按下鼠标左键并弹起后的状态。 - CSS列表属性
list-style:none; 去掉项目符号或者编号前面的各种符号。 - CSS边框属性
每个元素都可以加边框线
border(同时给四个边加边框线)、broder-left(左边框线)、border-right(右边框线)、border-top(上边框线)、border-bottom(下框线)。
border:粗细“空格”线形“空格”颜色;
线形:none(无)、solid(实线)、dashed(虚线)、dotted(点状线)
border:5px dashed red; - CSS内边距属性
边框线到内容间的距离。
padding(上下左右四个内填充同时设定)、padding-left(左内填充,左边框线到内容的距离)、padding-right、padding-top、padding-bottom。
padding:10px; //上下左右四个内填充为10个像素。
padding:10px 20px;//上下内填充为10像素,左右内填充为20像素。
Padding:5px 10px 20px; //上内填充为5像素,左右为10像素,下填充为20像素。
Padding:1px 2px 3px 4px; //上内填充为1像素,右为2像素,下为3像素,左为4像素。 - CSS外边距属性
边框线往外的距离。
margin、margin-left、margin-right、margin-top、margin-bottom。
margin:10px; //上下左右四个外边距为10个像素。
margin:10px 20px;//上下外边距为10像素,左右外边距为20像素。
margin:5px 10px 20px; //上外边距为5像素,左右为10像素,下外边距 为20像素。
margin:1px 2px 3px 4px; //上外边距为1像素,右为2像素,下为3像素,左为4像素。 - CSS背景属性
background-color 背景颜色
background-image 背景图片,eg:background-image:url(images/123.gif)
background-repeat 背景平铺,取值 no-repeat,repeat-x,repeat-y 。
background-position 背景定位,取值:left|center|right top|center|bottom。
定位方式:background-position:left center //图片在左中位置。background-position:50px 50px//图片距离容器的左端50像素,顶端50像素。background-position:50% 50% 图片水平居中,垂直居中。background-position:left 10px //背景靠左对齐,距顶端50像素。
简写方式 background:背景色 背景图 是否平铺 定位值. - 浮动和清除
float:让元素浮动,取值:left(左浮动)、right(有浮动)
clear:浮动清除,取值:left(清除左浮动)、right(清除右浮动)、both(同时清除左右浮动)。 - CSS浮动:
浮动的元素将向左或者向右浮动,浮动到容器的边上或者上一个浮动元素的边上。
浮动的元素不再占空间,并且浮动元素的层级要高于普通元素。
浮动的元素一定是块元素,无论之前是什么元素。
浮动的元素如果不定宽度,则会尽可能的变窄。故而一般要定宽度。
一行中的多个元素一起浮动,以解决兼容性。
功能:将多个块元素并列排版。 - CSS清除
功能:可以使包围元素从视觉上包住浮动元素,清除之下其他元素恢复默认排版。注:有浮动,就要清除。如果包围元素定了高度,可以不使用清除。 - CSS继承性
属性继承:外层元素的样式会被内层元素进行继承,多个外层元素的样式最终都会“叠加”到内层元素上。
文本属性都会被继承:color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height。
body的css属性会被其所有子元素继承。 - CSS的优先级
单个选择器的优先级:行内样式>id选择器>class选择器>标签选择器
多个选择器的优先级: 一般情况下,指向越精确优先级越高。特殊情况下假设: - display属性
- 规定了网页中元素如何显示。
- 取值:none(不显示)、block(以块元素显示)、inline(以行元素显示)
- block可以将行元素转为块元素,inline可以将块元素转为行元素。
- overflow属性
当内容溢出时该如何显示
取值:visible(可见)、hidden(隐藏)、scroll(滚动)、auto(自动) - cursor属性
规定网页内光标的类型。
取值:text(文本)、help(帮助)、wait(等待)、pointer(手形)。 - CSS定位
position(元素定位方式):static(默认状态,不定位)、 (固定定位)相对于浏览器窗口来进行的定位、relative(相对定位)、absolute(绝对定位)
定位坐标:定位元素距离目标元素top、bottom、left、right多少距离。 - HTML中引用CSS的方法
1、嵌入式:用<style type=“text/css”></style>
只能给当前网页使用,可存在多个。
2、外联式:通过<link>
标记引入一个CSS文件(.css),可实现CSS共享。<link rel=“styesheet” type="text/css” href=“文件地址”>
。<link>
标签放在<head>
标签内,可链接多个文件。
3、行内式:每一个HTML标记的公共属性(class、id、title、style)HTML中的style属性和CSS中的一致。 - CSS表格属性
Border-collapse:表格边框线合并,取值:collapse。 - 浏览器兼容性
不同浏览器下显示效果不同,兼容性调试,主要调试 :IE6、IE7、IE8、Firefox.
兼容性调试手段
1、全局设置
清除所有标记的内外边距body,ul,li,a,img,p,input{margin:0;padding:0;}
去除项目符号或者编号前的符号ul,li,ol{list-style:none;}
全局链接效果a:link,a:visited{color:#444;text-decration:none;}a:hover{color:red;}
网页中所有文字的大小颜色body{font-size:12px;font-family:宋体;color:#ccc;}
去除链接图片的边框线img{border:0;}
CSS HACK(尽量不用)
针对不同浏览器,编写不同的CSS代码,不同浏览器的CSS的识别符号
“*”IE6和IE7识别.box{*background-color:red;}
“_”只有IE6识别.box{_background-color:red;}
笔记2——css
最新推荐文章于 2024-09-08 19:17:17 发布