CSS基础知识点总结
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中一般也是字体的常用标识单位。
