<!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的一些基础知识的更多相关文章

  1. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  2. CSS样式表基础知识、样式表的分类及选择器

    一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...

  3. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  5. css+div网页设计(一)--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  6. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  7. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  8. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  9. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

随机推荐

  1. FOJ 2181 快来买肉松饼

    链接:http://acm.fzu.edu.cn/problem.php?pid=2181 思路:乍一看以为是并查集,仔细想了下又找不到让函数结束的条件,所以就看了其他人的搜索大法 #include ...

  2. RabbitMq 技术文档

    RabbitMq 技术文档 目录 1 AMQP简介 2 AMQP的实现 3 RabbitMQ简介 3.1 概念说明 3.2 消息队列的使用过程 3.3 RabbitMQ的特性 4 RabbitMQ使用 ...

  3. .NET中的CTS、CLS和CLR

    在学习.NET的过程中,都会不可避免地接触到这三个概念,那么这三个东西是什么以及它们之间的关系是怎样的呢?我们在学习的过程中可能比较过多的会去关注CLR,因为CLR是.NET Framework的核心 ...

  4. display:inline-block左右元素上下不对齐

    今天做了两个inline-block元素,出现左右两个元素顶端出现上下不对齐的情况(下图): 解决办法: 把应用 inline-block的元素加上 vertical-align: top; .CSS ...

  5. FTP服务器移动文件目录

    已经可以移动文件了,原因是路径问题.还是用的Rename方法.原因是RenameTo=“”;这里的路径之前没包含文件名,而且相对路径和绝对路径都没弄对,所以之前一直不相信别人说的Rename可以移动文 ...

  6. CLR thread pool

    Thread Pooling https://msdn.microsoft.com/en-us/library/windows/desktop/ms686756(v=vs.85).aspx Threa ...

  7. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  8. 初步体验javascript try catch机制

    javascript在ECMAScript3中引入了try catch finally机制,大致原理和其他语言一样. 我们也可以自定义错误事件. 但是事先声明:我们自定义的错误事件,只支持对name. ...

  9. ODBC连接MySQL出现&quot;E_FAIL&quot;错误

    ODBC不能处理这种格式的数据:0000-00-00,将其更新为正常的时间即可解决

  10. 11个有用的Linux命令

    Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.今天为你解释下面几个命令:sudo.python.mtr.Ctrl+x+e.nl.s ...