HTML学习-CSS_div详解

最新推荐文章于 2024-09-20 13:42:43 发布

AF丶年华

最新推荐文章于 2024-09-20 13:42:43 发布

阅读量61

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/muanhu/article/details/84371528

版权

CSS作用：是为了使网页美观，升级方便，维护轻松，能够让网页内容和样式信息进行分离。
　　（让内容和样式分开）。

使用link来导入CSS文件。
语法：<link href="url" type="text/css" rel="stylesheet" />

每个HTML都带了一个属性Style，可以直接设置CSS样式。
语法：<body style="background-color:red"></body>

选择器：
Html选择器：以原始本身命名的选择器。
语法：<style type="text/css">
　　 Table{
　　Border:2px;
　　}
　　 </style>
　　<table></table>//table会自动调用style里面的属性。
优点：直观，能一眼看出是选择的谁。
缺点：对于重复的html元素，不能单独设置属性。

Class选择器：
语法：<style type="text/css">
　　 .tb1{
　　Border:2px;
　　}
　　 </style>
　　<table class="tb1"></table>//用class的名字来设置属性
　　<元素 class="属性1 属性2 属性···">
　　
Id选择器：
语法：<style type="text/css">
　　 #b1{
　　Border:2px;
　　}
　　 </style>
<table id="b1"></table>//用id名来标识来设置属性
id只能指定一个选择器且唯一

父子关系：
1.<style type="text/css">
　　Body div{
　　}
</style>
　　<body>
　　<div></div>
　　</body>
2.<style type="text/css">
　　#div1 div {
　　}
</style>
　　<body>
　　<div id="div1">
　　 <div></div>
　　</div>
　　</body>
3.<style type="text/css">
　　#div1 #div2{
　　}
</style>
　　<body>
　　<div id="div1">
　　<div id="div2"></div>
　　</div>
　　</body>
Class同id一样。

伪类:又浏览器自动识别
如 a:link 未访问的连接
a:hover 鼠标指上去的时候
a:visited 已访问的连接
　　a:active 激活连接

优先级：内联->内嵌->外联
内联：直接当作属性写在元素后面。
内嵌：以集合方式写是head标签里面
外联：用<link>导入后缀名为.CSS的文件
导入：在<style>标签中使用@import url(文件路径);

常用的文本属性：
Font-size:文本的字体大小
Font-family:文本的字体类型
Font-syle:文本的字体样式
color:文本的字体颜色
Text-align:文本的字体对齐方式
常用的背景属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:
可取值：repeat 铺满 no-repeat 不铺满 repeat-x x轴平铺 repeat-y y轴平铺
常用的边界属性
Margin-top:对象的上边界
Margin-left:对象的左边界
Margin-bottom:对象的下边界
Margin-right:对象的又边界
Margin:0px auto;//代表居中
边框属性
Border-style：边框的样式
Border-width：边框的宽度
Border-color：边框的颜色
填充属性
Padding-top：内容与上边框之间距离
Padding-right：内容与右边框之间距离
Padding-left：内容与左边框之间距离
Padding-bottom：内容与下边框之间距离

盒子模型：
盒子中的内容：content;
内容与边框之间的填充：padding
边框：border
边界：margin
元素的排列方式是以标准流的方式

盒子宽度：padding-left + border-left + margin-left + width + padding-right + border-right + margin-right
盒子高度：padding-top + border-top + margin-top + height + padding-bottom + border-bottom + margin-bottom

浮动：可以改变流的位置，float属性的left和right分别能够让元素对象向左或者向右浮动。
左浮动：把位置让开，让后面的上来。
右浮动：把位置让开，后面的位置顶替前面的位置。
清空浮动：让元素停止浮动。

文挡流：在body中按照元素的先后顺序，从上而下，自左而右进行排列（标准流）
非标准流，给某个元素定位后的流叫做非标准留。

定位：
绝对定位：当容器的position属性值为absolute时，这个容器被相对定位了。使用绝对定位的容器前面或后面的容器会认为这个层不存在，绝对定位是对于利自己最近的非标准流盒子。
相对定位：当容器的position属性值为relative时，这个容器即被相对定位了。

无序或者有序做CSS做导航
<style type="text/css">
ul{
　　List-style-type:none;
}
Li{
　　Float:left;
　　Margin-left:10px;
}

</style>