CSS 介绍
1.css是什么
2. css作用
3.CSS书写规则
u 值的单位
书写注意事项：
1. 如果值为若干单词，则要给值加引号
2. 多个声明之间用分号分开
3.css对大小写不铭感，如果涉及到与html文档一起使用时，class与id名称对大小写铭感
导入CSS的几种方式
内联样式表
要使用内联样式，需要在相关的标签内使用（style）属性。Style属性可以包含任何CSS属性
例如
<div style=”border:1px solid black”>这是一个DIV</div>
注意：使用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时候才用。
内部样式表
使用<style>标签在html文档的<head>中定义样式表
例如
<div style="color: red; font-size: 100px;">你好css</div>
语法：
1.使用style标签进行css的引入
2.属性的写法： 属性 : 属性值
3.多个属性之前使用分号隔开
注意：这种方式只适用于一个页面
外部样式表
优势：可以在多个页面中使用同一个样式表。可以在html页面上使用<link>标签来导入外部样式表
例如
浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰呢。
外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑
mystyle.css文件内容：
语法：1.创建css文件，将css属性卸载css文件中
@import导入
这种方式也是外部导入：
使用方式如下：
关于@import与引用外部样式表的区别：
1.@import 这种方式只有firefox支持，而ie不支持
2.@import这种方式导入css，会在整个页面加载之后才会加载样式。网络不好，会闪一下。
使用外部样式表会先装载样式表，这样看到的就是有样式修饰的页面。
3.@import不支持通过javascript修改样式，而link支持、
优先级：
内联样式表 > 内部样式表 > 外部样式表
CSS选择器
css选择器主要是用于选择需要添加样式的HTML元素
1. id 选择器
id选择器使用#引用，它引用的是id属性中的值
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#d{
border: 3px ;
color: red;
}
</style>
</head>
<body>
<div id="d">王虎</div>
</body>
</html>
2.类选择器
类选择器使用时，需要在类名前加一个点号（.）
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.d{
border: 10px ;
color: red;
}
</style>
</head>
<body>
<div class="d">王虎</div>
</body>
</html>
3.元素选择器
文档中的元素就是选择器
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border: 10px ;
color: blue;
}
</style>
</head>
<body>
<div >王虎</div>
</body>
</html>
4.属性选择器
如果需要选择某个属性的元素，而不论属性是什么，可以使用属性选择器
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
input[type="text"]{
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom-style:solid ;
}
</style>
</head>
<body>
<input type="text" name="username" value="请输入你的姓名"/>
<br />
<input type="password" name="password" />
</body>
</html>
5.伪类
css伪类用于向某些选择器添加特殊效果
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：
活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。
css属性
字体
css字体属性定义文本的字体系列，大小，加粗，风格（如斜体）和变形（如小型大写字母）
常用属性：
font ： 简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-family ： 定义字体系列
font-size ： 定义字体的尺寸
font-style ： 定义字体风格
文本
css文本属性可定义文本的外观。通过文本属性，你可以修改文本的颜色，字体间距，对齐文本，装饰文本，对文本进行缩进，等等
常用属性
color ; 定义文本颜色
text-align ： 定义文本对齐方式
letter-spacing ： 定义字符间隔
word-spacing：定义字间隔
背景
css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。css在这方面的能力在html之上。
常用属性：
background ： 简写属性，作用是将背景属性设置在一个声明中
background- color : 定义背景的颜色
background-image：定义背景图片
background-position：定义背景图片的起始位置
background-repeat： 定义别进图片如何重复
尺寸
css尺寸属性允许你控制元素的高度和宽度
常用熟悉： width设置宽度 height设置高度
列表
css属性允许你放置，改变列表项标志，或者将图像作为列表标志
常用属性：
list-style ： 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image： 定义列表项标志位图像
list-style-position： 定位列表项的位置
list-style-type ： 定义列表项标志的类型
表格
css 表格属性可以极大帮助你极大地改善表格的外观
常用属性：
border- collapse:定义是否把表格边框合并单一的边框
border - spacing：定义分隔单元格边框的距离
caption - side ：定义表格标题的位置
轮廓
轮廓是绘制与元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
css outline 属性规定元素轮廓的样式。颜色和宽度
常用属性：
outline ： 在一个声明中设置所有的轮廓属性
outline-color ： 定义轮廓的颜色
outline- style ： 定义轮廓的样式
outline-width： 定义轮廓的宽度
定位
css定位属性允许你对元素进行定位
允许你定义元素相框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置
css有三种基本的定位机制：普通流，浮动， 和局对定位
常用属性：
position：把元素放置到一个静态的，相对的，绝对的，或者固定的位置中
top：定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right ：定义了元素右外边距边界与其包含块左边界之间的偏移
left : 定义了定位元素左边距边界与其包含块左边边界之间的偏移
bottom ： 定义了定位元素下边距边界与其包含块下边界之间的偏移
分类
css分类属性允许如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度
常用属性：
clear ： 设置一个元素的侧面是否允许其它的浮动元素
float ： 定义元素在哪个方向浮动
cursor ： 当指向某元素之上时显示的指针类型
display ： 定义是否 和 如何显示元素
visibility： 定义元素是否可见或者不可见
CSS框模型
CSS框模型（Box Model）规定了元素处理元素内容，内边距，边框，和外边距的方式
CSS框模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
元素的边框是围绕元素内容和内边距的一条或多条线
CSS border允许你规定元素边框的样式，宽度和颜色
常用属性：
border ： 简写属性，用于把针对四个边的属性设置在一个声明。
border-color 定义元素边框中可见部分的颜色，或为四个边分别设置颜色
border-style ： 用于定义所有边框的样式，或者单独为各个边框设置样式
border-width ： 用于为元素的所有边框设置宽度，或者单独为各个边框设置宽度
border-top ： 用于把上边框的所有属性设置到一个声明中
border-right ： 用于把右边框的所有属性设置到一个声明中
border-bottom： 用于把下边框的所有属性设置到一个声明中
border-left： 用于把左边框的所有属性设置到一个声明中
外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”
设置外边距的最简单的的方法就是使用margin属性，这个属性接受任何长度单位，百分比甚至负值
margin-top 定义元素的上边距
margin-right 定义元素的右边距
margin-bottom 定义元素的下边距
margin-left定义元素的左边距
内边距
元素的内边距在边框和内容之间。控制该区域的属性是padding属性
常用属性：
padding- top 定义元素的上内边距
padding- right 定义元素的右内边距
padding-bottom 定义元素的下内边距
padding-left 定义元素的左内边距
6350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
