CSS基础学习记录

CSS三种样式:  

内联式    例：<p style="color:blue">

嵌入式    例：<style type = "text/css"> xxxx </style>

外部式    例：<link href="CSS文件" rel="stylesheet" type="text/css">

                如果三种样式同时存在并且对同一标签进行同属性操作， 比如内联效果为A 嵌入B 外部C 那么显示的效果为A， 优先级为 内联>嵌入>外部

选择器：

<p class="class1">     CSS中   .class1为选中这个p标签，.称为类选择器

<p id="id1">              #class1选中p标签，称为id选择器

id选择器与类选择器的区别：  id选择器在文档内只能使用一次，同一个文档不能有两个相同的ID  而类选择器可以有相同的类名   类选择器可以使用列表 例: class"c1
 c2"    .c1 .c2都是

后代选择器： 

有标签  <div class="class1"> <span><a></a></span>  </div>

那么 .class1>span只包含 span标签 不包含a标签（一代）

如果 .class1 span 则包含了span 以及a标签

伪类选择符：

a:hover{color:red;} 表示鼠标滑过标签a时,字体显示红色

CSS文件中：

如果为同一个标签设置多种样式，那么按照 权值最高的来确定显示哪个样式  组合的权值相加计算

标签名 权值1 ：例  p{ }

类选择器 权值 10： 例  .class{}

id选择器 权值 100： 例 #id{}      

如果在设置属性时 在分号前增加 !important 那么这个属性的优先级总是大于其他样式

文本属性：

font-family:"宋体",sans-serif;  字体设置

text-decoration:underline; 下划线   line-through; 删除线

text-indent:2em;  段落缩进

line-height:2em; 行间距

letter-spacing:50px; 设置字母间距

word-spacing:50px; 设置单词间距

text-align: center;  对齐 居中   left right 左对齐 右对齐

font-size:字体大小

font-style:italic 设置斜体

font-weight:bold  字体加粗

font-variant:small-caps 段落设置为小型大写字母

line-height: 行间距 

标签的种类：

块状元素： <div> <p> <h1>-<h6>  <ol> <ul> <dl> <table> <address> <blockquote> <form>

特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行，

    元素的高度，宽度，行高以及顶部和底部间距都可以设置，元素宽度在不设置的情况下，是它本身父容器的100%。

内联元素： <a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

特点：不能设置高度 宽度， 多个行内元素排成一行，直到一行排不下才会另起一行。只能设置水平方向间距 margin-left,right,padding-left,padding-right.

内联块状元素：<img>  <imput>

元素种类转化：

a{display:block} 把a标签转化为块级元素

display:inline-block 把内联元素转化为块级元素 让元素可以在同一行显示，并且可以设置宽高边距。

盒子模型:





    div p hi ol ul table都可以是盒子模型 例：

div{ width:200px;   padding:20px; border:1px solid red; margin:10px}

border为边框 1px为边框的粗细 两个边框之间的距离为margin， padding为边框内对象到边框距离。

border: 2px solid red;  分别为设置 border-width  border-style border-color属性

border-style 边框样式： dashed虚线  dotted点线 solid实线

border-color 边框颜色

border-width: 边框宽度   thin|medium|thick   一般用px单位来表示

CSS布局模型

1.流动模型(默认的网页布局模式)

2个典型的特点：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%

内联元素都会在所处的包含元素内从左到右水平显示

2.浮动模型

float:left: 可以使两个块状元素并排显示

3.层模型

层模型有三种形式

1.绝对定位

position:absolute

原来的位置去除,空间会被其他标签所占据

2.相对定位

position:relative

原来的位置还在，不会被其他标签占据

3.固定定位

position:fixed 

浮动在浏览器窗口，不会因为滚动条滚动而看不到。

当父级元素position设置为relative时， 子元素设置absolute，则子元素相对参照物为父级元素，而不是浏览器窗口。

颜色的几种设置方式：

color:red;   green blue 等等

color:rgb(133,33,33);

color:(20%,30%,40%);

color:#00ffff;

color:#off  当每两个数字相同时，可以缩写成这个形式， 这个跟上一行效果相同