9.02_css

标签：float   css   ref   浮动   ott   页面   原则   sheet   bsp   

一、CSS概述

? 　　Cascading Style Sheets : 层叠样式表

　　主要用作用:

　　　　? 用来美化我们的HTML页面的

　　　　? HTML 决定网页的骨架 ,CSS 化妆

?　　　　将页面的HTML和美化进行分离

　　　　CSS的简单语法:

　　　　? 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

　　　　<style>
　　　　　　选择器{
　　　　　　属性名称:属性的值;
　　　　　　属性名称2: 属性的值2;
　　　　　　}
　　　　</style>

　　　　CSS选择器: 帮助我们找到我们要修饰的标签或者元素

　　　　元素选择:

　　　　元素的名称{
　　　　　　属性名称:属性的值;
　　　　　　属性名称:属性的值;
　　　　}

　　　　ID选择器:

　　　　以#号开头 ID在整个页面中必须是唯一的s
　　　　#ID的名称{
　　　　属性名称:属性的值;
　　　　属性名称:属性的值;
　　}

　　类选择器:

　　　　以 . 开头
　　　　.类的名称{
　　　　属性名称:属性的值;
　　　　属性名称:属性的值;
　　　　}

　　　　CSS的引入方式:

?　　　　 外部样式: 通过link标签引入一个外部的css文件

　　　　? 内部样式: 直接在style标签内编写CSS代码

? 　　　　行内样式: 直接在标签中添加一个style属性, 编写CSS样式

　　　　CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

　　　　float属性:
　　　　left
　　　　right

　　　　clear属性: 清除浮动
　　　　both : 两边都不允许浮动
　　　　left: 左边不允许浮动
　　　　right : 右边不允许浮动
　　　　流式布局

二、CSS的优先级

　　按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

　　- CSS中的其它选择器

　　　　- 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

　　　　- 属性选择器:

　　　　a[title]
　　　　a[titile=‘aaa‘]
　　　　a[href][title]
　　　　a[href][title=‘aaa‘]

　　　　- 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

　　　　- 子元素选择器: 父选择器 > 儿子选择器

　　　　- 伪类选择器: 通常都是用在A标签上

三、CSS的盒子模型: 万物皆盒子

　　内边距:

　　padding-top:

　　padding-right:

　　padding-bottom:

　　padding-left:

　　padding:10px; 上下左右都是10px
　　padding:10px 20px; 上下是10px 左右是20px
　　padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
　　padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向 

　　外边距:

　　margin-top:

　　margin-right:

　　margin-bottom:

　　margin-left:

　　CSS绝对定位:

　　? position: absolute

　　? top: 控制距离顶部的位置

? 　　left: 控制距离左边的位置

9.02_css

标签：float   css   ref   浮动   ott   页面   原则   sheet   bsp   

原文地址：https://www.cnblogs.com/zyyzy/p/12457808.html