公告：九九网站目录为广大站长提供免费收录网站服务，会员可在线完成投稿无需添加友情链接。
【34】
1、CSS 入门
A、为什么学习 CSS（CSS 的作用）
【1】HTML 虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观。
【2】HTML 进行网页的书写重复的代码比较多，后期的维护性不好。
B、什么是 CSS（CSS 的概念）
英文全称：Cascading Style Sheets
层叠样式表（级联样式表）
CSS 的引入方式
CSS 的引入的三种方式
在标签的内部直接使用（不推荐使用）
--1、行内式style=key:value;style="font-size:30px;color: yellow;"-->--2、内嵌样式这个style标签写建议写到head里面，因为这个中的内容需要展现到用户面前的--><style>/*选择器 */span{/*字体的大小*/font-size:30px;/*字体的颜色*/color:red;/*字体的样式*/font-family:宋体;}style>这个(.css)文件是在外部定义好的文件直接建立csss文件就可以了--3、链接式rel:当前的文档和引入的文档的关系href:是指引入文档的关系--><linkrel="stylesheet"href="css/css.css"/>--**了解：这种方式也可以引入CSS的样式，作为了解--><style>@importurl("css/css.css");style>CSS 中三种引入方式遵循的就近原则 ：
不相同的样式会进行样式的叠加，相同的样式会采用就近的原则。样式跟随距离自己近的风格
CSS 中的常用选择器 :
标签选择器
p{color:red;}id选择器
id:(唯一性)
id命名：数字、字母、下划线、中划线（-），不能用数字开头
p_1{font-size:30px;color:yellowgreen;}class选择器
.p_2{font-weight:bold;color:yellow;}三种选择器的优先级：
id 选择器>class 选择器>标签选择器
权重 100 10 1
CSS 中其他选择器
后代选择器 只要包含该标签对象即可
divspan{font-size:27px;font-family:宋体;color:red;}子选择器 直系子标签
div>span{color:red;}兄弟选择器 只会改变下面相邻的元素对象
p_1+p{color:green;}兄弟选择器 后面所有的兄弟对象都会改变
p_1~p{color:red;font-size:30px;}伪类选择器
a:hover{color:red;}CSS 中常用样式总结 1
字体：（font）
/*字体的颜色*/color:gray;/*字体的大小*/font-size:12px;/*字体的加粗*//*font-weight: bold;*//*字体的风格*//*font-family: 宋体;*//*字体倾斜*//*font-style: italic;*文本（text）/*下划线展示*/text-decoration:underline;/*去除下划线*/text-decoration:none;/*文本居中*/text-align:center;border 属性有三个修饰属性
border-colorborder-color:red;border-top-color:blue;border-widthborder-width:1px;border-left-width:3px;border-styleborder-style:solidborder-bottom-style:solid；可以使用border统一设置border:1pxsolidred;border-right:5pxdottedblue;CSS 常用样式总结 2
行高
line-height:40px;背景
/*设置背景图片*/background-image:url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");/*设置背景图片不重复*/background-repeat:no-repeat;/*调整背景图片的位置 X Y*/background-position:center;/*调整背景图片的大小 宽 高 *//*background-size: 300px 500px;*//*背景颜色 red f0000 rgb(255,0,0)rgba(255,0,0,.5){包含透明度} */background-color:rgba(255,0,0,.5);CSS 中常用样式总结 3
行元素和块元素
行内元素：（多个标签位于同一行）
span font 小标签 img a 等
块元素：（标签可以自动换行的元素是块元素）
div h1-h6 ul p 等
其他样式
/*调整透明度的属性 0-1*/opacity:0.4;/*超出隐藏 hidden*/overflow:hidden;/*行内元素转块级元素 inline block none(隐藏)*/display:block;CSS 中的定位
绝对定位:
absolute :定位离开之后释放的之前的位置 基于外
层父级标签来说
相对定位：
relative: 定位离开之后之前的位置没有释放 基于之
前的位置来说
固定定位：
fixed ：始终是基于浏览器的左上角定位 适合做广告
默认定位：
static ：初始的定位的操作
