CSS的一些基础知识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的一些基础知识相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="页面描述" />
<!--
<link rel="stylesheet" type="text/css" href="学习css.css"/>
引用外部css文件的方法。
-->
<!--
<style type="text/css">
p {
font-size:40px;
color:blue;
}
/*
主要是使用这种方式，p表示选择器
*/
</style>
引用内页css文件的方法。
background:green;表示背景颜色
-->
<style type="text/css">
body {
font-size:20px;
color:blue;
}
a {
color:green;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:underline;
}
/*
一、【选择器】
简单选择器：
a,b,c,d,e,f,g.....z,A,B,C,D,E,F....Z,0,1,2,3,4,5,..9,-,_
（1）id 选择器：（取id名的规则，区分大小写，最好不要纯数字开头）
id是唯一的，id要和#来配合使用、例如：id="div1"配合#div1
（2）类（class）选择器：class则不是唯一的，例如：class="red"配合.red
（3）标签选择器：直接将html 标签名作为选择器，例如：div、p、body
复杂选择器
1)交集选择器：一个标签选择器后边跟一个类选择器或者一个ID 选择器，中间
不能有空格。它要求必须是属于某一个标签的，并且声明了类选择器或者
ID 选择器。
例如p.red div#div
2)并集选择器
就是多个选择器以逗号相连，只要满足其中之一它都会被选中！
我们上面学的选择器都可以被写入并集选择器
div,p,li,h1,div.mycolor,div#mydiv {…}
3)后代选择器（包含选择器）
是以空格相连的的多个选择器，外层的选择器写在内层的选择器前面！
根据元素的后代关系来作为选择的筛选条件！
div h1.first span.firstletter {…}
伪类选择器【:hover】
a:hover {
color:red;
}
用于<a href="http://www.baidu.com/" target="_blank">百度一下</a>，可以使
鼠标放上去时，目标变成red色。其它的标签也可以用，但有一些浏览器ie6不支持，
所以一般只是在a上用。
通配符选择器
它是一种特殊的选择器，它用*符号表示，它可以定义文档中所有元素对象的样式!
* {}
#div1 {
font-size:30px;
}
.red {
color:red;
}
div {
color:red;
}
p {
font-size:30px;
}
p.red {
color:red;
}
div#div1 {
}
div,p,li.li1 {
color:red;
font-size:30px;
}
div span {
color:red;
}
a:hover {
color:red;
font-size:18px;
}
* {
font-size:60px;
}
二、【构造文本】
CSS 长度值得单位：
%——百分比
in——寸
cm——厘米
mm——毫米
pt——point，大约1/72 寸；
pc——pica，大约6pt，1/6 寸；
px——屏幕的一个像素点；
em——元素的font-size；
p {
text-indent:10px或20%; 首行缩进
text-align:left; 文本对齐：可以的值为：left、center、right
line-height:23px或220%; 文本行高：默认：normal
word-spacing:normal; 英文单词之间的间隔
letter-spacing:normal; 字母以及汉字之间的间隔
text-decoration:underline; 下划线
font-family:微软雅黑或宋体; 字体：多个字体用逗号隔开
例如：font-family:"Times New Roman",Georgia,Serif;
意思是说有第一个字体时，就用第一个，没第一个时，
就用第二个字体
font-style:oblique; 字体风格：normal正的，italic斜的，oblique斜的
font-size:14px; 字体大小：
color:#597645; 文本颜色：可以为一些英语单词，或颜色代码
font-weight:bold; 文本加粗：常用值：normal，一般用bold
}
body的继承只有超链接会继承不了。
三、构造块级元素
1）宽高
2）背景
3）边框
1. 宽高
width:数值;
height:数值;
也可用百分比！
长高的设置不会被后代继承
2. 背景
(1)背景颜色
background-color:颜色值;
元素的背景颜色默认为transparent
background-color 不会被后代继承。
(2)背景图片
使用background-image 属性默认值为none 表示背景上没有放置任何图像
如果需要设置一个背景图像，必须为这个属性设置一个url 值
background-image: url(bg.gif);
注意图片的位置引入方法!
背景图片重复的问题
使用background-repeat 来解决，可以的值：repeat-x，repeat-y，no-repeat
背景图片的位置
使用background-position 来设置
1>可以使用一些关键字：top、bottom、left、right 和center 通常，这些关键字
会成对出现。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
a）background-position:center left;
使用关键字 ：top、bottom、left、right 和 center时，表示
第一个值是 y轴（垂直方向）,第二个值是x轴（水平方向）
2)background-position:50% 3%;
使用具体的数字，例如百分比的时候、或者像素（px为单位）
第一个值 指得是X轴（水平方向）,第二个只是Y轴（垂直方向的偏移）
2>也可以用百分比
background:50% 50%;
第一个表示水平第二个表示垂直
3>当然更可以用数值，以px 单位
background:40px 10px;
第一个表示水平第二个表示垂直
4>也可以混用！
背景关联（就是说拖动上下滚动条时，背景保持不动）
background-attachment:fixed
(3)总结写法
background: #00FF00 url(bg.gif) no-repeat fixed center left;
3. 边框
border:1px solid（实线） #ccc;
dashed 表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分开设置
最后来讨论一个有趣的问题：
后代元素长度大于祖辈元素的大小时候的处理方法：
overflow:;(写在祖辈元素的css代码中#div2 {width:200px;height:200px;backgrou
nd:#CCFF66;border:1px solid #000000;overflow:auto;}，后代元素的css代码中也可以写)
可能的值：
visible：默认，内容不会被修剪，会呈现在元素框之外。
hidden：超出的内容会被修剪掉，直接不现实。
scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被超出，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承overflow 属性的值。
四、盒模型概念
CSS 盒模型(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距
的方式,页面中的所有标记都可以看成是一个盒子，盒模型是我们对网页元素进
行定位的基础，而定位是我们对网页元素进行位置固定的重点知识！
元素性质相互转化：
display:block; 在css代码中，可以把内联元素转换成块级元素
a {
width:200px;
height:100px;
background:#33FFFF;
display:block;
}
display:inline; 在css代码中，可以把块级元素转换成内联元素
#div4 {
width:200px;
height:50px;
background:#99CC33;
display:inline;
}
display:inline-block;在css代码中，可以让块级元素并排排列 IE6不支持
display:none; 在css代码中，可以让块级元素消失
内边距：边框和内容区之间的距离，通过padding 属性设置
内边距设置方法：
padding-top:10px;
padding-right:10px;
padding-bttom:10px;
padding-left:10px;
简写：padding:上右左下;
padding:10px 20px 40px 30px;(写两个的话，第一个是上下，第二个是左右)
外边距：元素边框的外围空白区域是外边距，通过margin 属性设置
外边距设置方法：
margin:;用法同上！
body{
border:1px solid #cccccc;
margin:0px;（可以让body铺满整个页面，不留空隙）
padding:0px;(可不写)
}
五、浮动
浮动的设置方法：
float:left;
float:right;
我不想标准流中的元素受到浮动的影响怎么办？
clear:both;
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
如果连续多个元素设置浮动呢？
结论：被设置浮动的元素会组成一个流，并且会横着紧挨着排队，直到父元素的
宽度不够才会换一行排列。
六、相对定位与绝对定位
position:relative;
left:30px;
right:30px;
top:30px;
bottom:30px;
相对于原来的位置进行定位（偏移）
left与right也只能用一个
top与bottom也只能用一个
为元素设置相对定位之后，元素依然会占据原来的空间，依然在标准流中！
2.绝对定位
position:absolute;
left:;
right:;
top:;
bottom:;
为元素设置绝对定位之后，元素不会占据原来的空间，脱离了原来的队伍！
可以是负数
3.固定定位
position:fixed;
left:;
right:;
top:;
bottom:;
相对于浏览器的窗口进行定位
拖动滚动条，目标位置不会改变
固定定位ie6不能实现，不兼容
4.重叠元素的堆叠顺序设置
使用z-index:100;
对设置了相对或绝对或固定定位的元素进行堆叠顺序的设置，
设置的数值越大即堆叠在越上层，该属性可以是负值。
七、构造列表
1.构造列表
将ul 或ol 在css中设置为
list-style: none;
可以让列表前面的小黑点消失
剩下的部分的例子：
边框颜色：#BBBBBB
下边框颜色：#dedede
列表每行高度：31px
文字缩进：35px
字体：微软雅黑
文字颜色：#3c3c3c
背景颜色：#F8F8F8
八、布局初探
1.固定浮动布局
固定浮动布局即是用固定的值将元素的长度设置为固定不变，然后配合浮动的
技术实现整个页面的一个布局。
1）块级元素怎么相对于父元素居中？
答：元素需要设置长度width:1000px;，元素左右的外边距设置为auto(margin-
left:auto; margin-right:auto;) 即可！
*/
</style>
</head>
<body>
<p>我是一个人</p>
<!--
<p style="font-size:40px;
color:red;">我是一个人</p>
行内引用css的写法
-->
<div class="red">div容器</div>
<div class="red">div容器</div>
<div>div容器</div>
<div id="div1">div容器</div>
<p>段落</p>
<p id="p1">段落</p>
<p class="red size40">段落</p>
<p>段落</p>
<div><span>span</span></div>
<ul>
<li class="li1">列表</li>
<li>列表</li>
<li class="li1">列表</li>
<li>列表</li>
<li class="li1">列表</li>
</ul>
<div>
<p>我是div里面的p<span>我是div的后代span</span></p>
<p>我是div里面的p</p>
</div>
<a href="http://www.baidu.com/" target="_blank">百度一下</a>
<div>我是div容器</div>
<div>我是div容器</div>
<div id="div2">
<div id="div3">
的武器大全我地区我的武器大全我地区我的武器大的武器大全我地区我的
武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武
器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全
我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我
地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我
的武的武器大全我地区我的武器大全我地区我的武全我地区我的武器大全
我地区我的武器大全我地区我的武器大全我地区我
</div>
</div>
</body>
</html>
以上是关于CSS的一些基础知识的主要内容，如果未能解决你的问题，请参考以下文章