和cool一起学前端----第三天

前言

css(层叠样式表)是用来改变我们编写的html样式的语言，通俗的就是说，我们给html穿上衣服，使html表现出各种样子，引入css的三种方式：

• 外部样式表
• 内联样式
• 嵌入样式

内联样式

<div style="background: red; width:200px; height: 200px;"></div>

在标签里面写上style属性，然后写上对应的样式

嵌入样式

嵌入样式要写在head标签之间，同时用style标签裹住，如下图

给标签绑定class,或者id属性，在样式里可以通过.class,#id的对应方式获取到对应的标签

外部样式

在head标签中，通过link标签来引入

<link rel="stylesheet" href="imgs/style.css">

在style.css的头部加上字符集编码，防止乱码，@charset “utf-8”;。

针对同一个标签，内联样式得优先级>内嵌式>外部样式，如果想调整样式得优先级，可以给样式加一个权重!important,这样不管样式在哪，优先级都是最高得。

css基础

给标签穿上衣服，首先得要找到标签，上面刚说的，通过class,id属性来找到对应得标签，也还可以通过其他的方式来找到对应得标签，这就是我们要说的选择器。

• 标签名选择器
• 派生选择器
• 类名选择器
• id选择器
• 属性选择器

标签名选择器

div{ font-size: 20px}

给所有得div标签都加上这个样式

派生选择器

div a{ color: white}

给所有div里面a标签加上这个样式。
派生选择器中分了后代选择器，子元素选择器，相邻兄弟选择器之类的，我觉得都没必要详细去追究，毕竟我们刚开始学习，整那么多幺蛾子实在没必要（当然有问题还是可以留言给我的）。

类名选择器

.odiv{background: red; width:200px; height: 200px;}

给所有class属性为odiv的标签加上这个样式，这个就是上面提到的给标签绑定class属性，一个标签可以绑定多个class,例如

,test1,test2也可以出现在别的标签绑定的class上

id选择器

#odiv{ background: black; width: 200px; height: 200px;}

给id属性为odiv的标签加上这个样式，这个就是上面提到的给标签绑定id属性，但是id是唯一的，一个html页面上一个id只能出现一次，意思就是，你给这个标签绑定了id属性值为odiv,那别的标签就不能绑定属性值为odiv的id。

属性选择器

[title="kdiv"]{ background: orange; width: 100px; height: 100px;}

给所有title属性为kdiv的标签绑定样式。属性选择器通常会在表单标签中使用，譬如input标签type有多个属性，我们可以使用input[type=“text”]来给标签加上样式，其他时候使用不多。

css基础样式

首先我们需要说一下概念，内联元素，块级元素，内联元素简单来说，不管你写多少个内联元素的标签，他们都显示在一行，块级元素就不一样了，每一个块级元素就是一个容器，可以定义它的大小，每个同级的块级元素都是独立的。

<p>这个是块级元素p</p>
<p>这个是块级元素p</p>
<span>这个是内联元素span</span>
<span>这个是内联元素span</span>
<span>这个是内联元素span</span>
<span>这个是内联元素span</span>

你给内联元素定义宽高这样的样式是没用的，但是你可以可以通过display:block;这个样式是给内联元素改成块级元素的一种方式，通过display:inline;这个样式是给块级元素改成内联元素的方式，当然display样式还有其他的值，暂且不提。
常见的内联元素：span,i,em,a,input
常见的块级元素：div,p

css开始了

设置文字

font-size:12px 设置字体大小
font-family:“微软雅黑"设置字体
color:red 设置文字颜色,颜色可以用”#111111"这样的书写方式，借助拾色器，还可以用rgba(0,0,0,0.1),a表示透明度，1表示不透明，0为透明
font-weight:bold 设置文字加粗，不加粗设置为“normal”
font-style:italic 设置斜体，普通设置为normal

设置容器

width:100px 设置容器宽度
height:200px 设置容器高度
background:red url(img.jpg) left top no-repeat fixed; 设置背景颜色和图片
可以拆分为background-color:red，background-image:url(img.jpg)，backgound-position:left top(这个是定义图片显示在容器的位置，可以为具体的数值，根据容器的左上角来定的，如backgound-position:10px 20px,就是距离容器最左边10px,距离顶部20px的地方展示图片), background-repeat:no-repeat,background-attachment:fixed,

border:1px solid red;设置边框，第一个表示边框的宽度，第二个表示边框的样式（solid代表实线，dotted代表点线，dashed代表虚线），第三个表示边框的颜色。容器有四个边框，可以分别设置border-left,border-right,border-bottom,border-top的值
opacity:0.5 设置容器或字体的透明度

设置边距

padding:10px 20px 30px 40px设置内边距,分别对应上右下左四个外边距
margin:10px 20px 30px 40px 设置外边距,分别对应上右下左四个内边距
这俩个有初学者容易弄混乱，记住margin是对外面的元素有效，而padding对内有效，看如下代码

<div style="width: 100px;  border: 2px solid red; margin: 10px 20px 30px 40px;padding:40px 30px 20px 10px">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

定位

position:relative/absolute
这个定位主要是子元素针对父元素的，想让子元素显示在父元素的某个具体的位置上，在父元素的样式里设置position:relative,在子元素中设置position:absolute;然后通过设置top,left,right,bottom值来确定位置。

<div style="position: relative; width:300px; height:300px; background: red">
   <div style="position: absolute;top:50px; left:100px; width: 100px; height: 100px; background: purple"></div>
</div>

left,right设置一个,top,bottom设置一个就行了。

浮动

float:left,right
子元素将显示在父容器的左边或者右边

<div style="width: 300px; height:300px; background:purple; margin-top: 100px">
    <div style="width: 100px; height:100px; background:green; float: left;"></div>
    <div style="width: 100px; height:100px; background:yellow; float: right;"></div>
</div>

用了float，父元素一定要及时的清楚掉,不然可能会影响到页面的其他布局显示等问题，清楚浮动的方式在下一节讲。
好了，今天就到这儿了，要是觉得我讲的不清楚不对的，欢迎留言哦