学习笔记-css

页面美化和布局控制
概念：Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，并且同时生效
好处：功能强大，将内容展示和样式控制分离（降低耦合度，让分工协作更容易，提高开发效率）

CSS的使用（CSS与html结合方式）：

1.内联样式：在标签内使用style属性指定css代码
例：<div style="color:red;">hello css</div>
2.内部样式：在head标签内定义style标签，style标签的标签体内容就是css代码
例：
<style>
    div{
        color: fuchsia;
    }
</style>
3.外部样式：定义css资源文件，在head标签内定义link标签引入外部资源文件

CSS语法
选择器{
属性名：属性值；
…
属性名：属性值
}
选择器:筛选具有相似特征的元素
注意： 属性名与属性值用冒号（：）隔开，每一对属性需要使用分号（；）隔开，最后一对属性可以不加分号

选择器

分类：
基础选择器
1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id唯一
语法：#id属性值{}

例：
#div1{
    color: red;
}

2.元素选择器：选择具有相同标签名称的元素
语法：标签名称{}

例：
div{
    color: fuchsia;
}

3.类选择器：选择具有相同class属性值的元素
语法：.class属性值{}

例：
.cla1{
    color: red;
}

扩展选择器

1.*选择器：选择所有元素
语法：*{}
例：
*{
    color: brown;
}
2.并集选择器
语法：选择器1，选择器2{}
例：
div,p{
    color: darkslategray;
}
3.子选择器：筛选选择器1下的选择器2元素
语法：选择器1 选择器2{}
例：
div p{
    color: red;
}
4.父选择器:筛选选择器2的父元素选择器1
语法：选择器1>选择器2{}
例：
div>p{
    color: red;
}
5.属性选择器（一般用于input标签）
语法：元素名称[属性名=’属性值‘]{}
例：
input[type='text']{
    border: 5px solid;
}
6.伪类选择器：选择处于特定状态的元素（如<a>标签具有这些状态：link初始化状态，visited已访问状态，active正在访问的状态，hover鼠标悬浮状态）
语法：元素名称：状态{}
例：
a:visited{
    color: blue;
}

属性

字体
font-size（字体大小）
文本
color（文本颜色）
text-align（对齐方式）
line-height（文本行高）
背景
background（复合属性，设置对象的背景特性）
边框
border（复合属性）
例：border: 1px red solid;
尺寸
width（宽度）
height（高度）
盒子模型（页面布局）
margin（外边距）
padding（内边距）
注意：默认情况下内边距会影响整个盒子的大小
解决方法：设置盒子的属性让width和height就是盒子最终大小，box-sizing：border-box；
例：
.cla1{
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;

}

float（浮动）：取值有left（左浮动），right（右浮动）