首页 > 技术文章 > CSS基础知识点总结

chenyuanqiu2008 2016-05-06 01:19 原文

CSS基础知识点总结

CSS 指层叠样式表 (Cascading Style Sheets)
用于格式化网页内容的技术

1.样式规则
内联 (内嵌)本标签style
内部 (内联)head里边style
外部 (外联)head里边link

样式用花括号括起来{}
建议简写,用于性能优化,font-size 简写为font

选择器和选择器用,隔开
div,p,form

呈现最近的元素

内嵌 > 内联 = 外联
后边两个看顺序


2.选择器
元素选择器:即标签选择器,div,p,等
名称{。。。}

类选择器:用. class
.名称{。。。}

id选择器:用#
#名称{。。。。}

CSS 派生,后代选择器;div span{}div下边的span
父选择器__子选择器{。。。}

下边的不常用:
CSS 子元素选择器 >
CSS 相邻兄弟选择器 +
属性选择器 []
CSS 伪类 动态的是伪类
伪元素 静态的是伪元素
相邻兄弟 选择器 + 选择器
子元素 父选择器 > 子选择器

*通配符:作用所有元素
*{margin:0
padding:0}
reset重置技术,用于浏览器的兼容问题

现在不用这个重置,现在用的都是normalize
需要哪些清零就哪些清零

 

必须掌握
伪类:用于添加一些特殊的效果
hover(鼠标移过去显示的效果)
firstchild

div:hover
或者div:hover img(div里边的img)


☆权重值(一定要说权重值)
一等 内嵌(开始标签,style) 1000
二等 id 0100
三等 类和伪类 0010
四等 元素和伪元素 0001

没有权重值 0000
*通配符
important:有个特例,让别的选择器权重失效,让自己权重值最高

权重值可累加,不可进位


3.css层叠

 

css继承
子元素父元素继承属性
可继承:颜色,字体

不可继承:margin,padding(外边距,内边距)


4.a标签的四种状态
a:link 无访问
a:hover 鼠标移入
a:visted 已访问
a:active 被选择

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

 

5.CSS样式
☆背景:图片(url),颜色(color),重复(no-repeat),大小(size),定位(position)

<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url("12.jpg");
/*设置不重复填充界面*/
background-repeat: no-repeat;

/*这里可以用于填充整个边框界面大小,一般设置而为边框大小*/
background-size: 500px,500px;
}
</style>


☆文本:缩进(可以±),颜色,装饰(上划线,下划线),行间距,对齐方式,字间距,大小写

log用的文本缩进,图片。。。
/*a标签去掉下划线*/
a{text-decoration: none;}

垂直居中:vertical-align:middle;line-height:行高值
水平居中:text-align:center
居中方式可以用在其他地方,比如表格等等

文字
自定义字体:font-face常规用,这些字体传到服务器的,用的时候会下载
而不用字体系列,font-family这种智能用自己电脑的字体

font-weight:加粗(bold,bolder加粗更粗)
字体倾斜:font-style: oblique;
font-size:大小

☆列表:类型(.123等等),定位,图片(自定义图标)
列表做导航
ul li
取消小圆点或者其他点类型
/*设置列表前边的小圆点,可以设置其他*/
li{list-style: none;}


☆轮廓(少用):颜色,样式,宽度

 


CSS样式代码清单:
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>

<!--关联 外部样式表,后缀名.css-->
<link rel="stylesheet" href="外部样式.css">

<!--内联,写在style-->
<style type="text/css">
div {width: 30px;color: red;font-size: 30px}

/*类选择器 ,前边没有加某个标签,默认是上边一个的类和id选择器*/
.span1{
color: lime;
}
/*id选择器*/
#span1{
color: brown;
}

/*在.和# 前边写了标签名,为这个标签的类和id选择器*/
p.small {line-height: 90%;

}
p.big {font-size: 200%}

p#123{
color: orange;
}

/*hover用于鼠标移动到这里的效果*/
div:hover{
background: yellow;
}
img:hover{
width:300px;
height:auto;
}

/*派生,后代选择器,表示div里边span的样式*/
div span{}
</style>

</head>
<body>


<img src="11.jpg" alt="" width="100" height = auto>

<div>
<p class="big">big</p>
<p class="small">small</p>
<p id="123">darkgreen</p>
</div>

<div class="span1">(.class)class="span1"</div>

<div id="span1">(#id)id="span1"</div>

<!--引用的外部样式,head里边link-->
<h1>ha</h1>

</body>
</html>
-----------------------------------------------------------------------

 

CSS样式代码清单:背景,其他格式,比如文字对齐方式等等
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS框模型,定位</title>

<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url("12.jpg");
/*设置不重复填充界面*/
background-repeat: no-repeat;

/*这里可以用于填充整个边框界面大小,一般设置而为边框大小*/
background-size: 500px,500px;
}

/*a标签去掉下划线*/
a{
text-decoration: none;
border: 1px solid red;
/*行高*/
line-height: 100px;
}

/*设置列表前边的小圆点,可以设置其他*/
li{
list-style: none;
}

</style>


</head>
<body>

<div></div>

<ul>
<li>s</li>
</ul>
<a href=""><br>我是一个链接</a>

</body>
</html>
-----------------------------------------------------------------------

 

 


在html里 pt 和px的区别是

pt——点。一般为网页中标识字体的单位。
px——像素。一般也为网页中标识字体的单位。
两种关系:一英寸=72pt(点)=96px(像素),网页中最常用到的:9pt=12px。
在Flash中一般也是字体的常用标识单位。

推荐阅读