1.什么是css

层叠样式表(cascading style sheets)
控制html的显示方式。(样式,页面布局)

2.Css的引入方式

1)内联样式(行间样式): 不建议用

aaaa

复用性不好;
优先级最高;
内容和样式没有分离;

2)内部样式表

选择器{ 
                声明1;(属性名:属性值)
                声明2;
}
<style>
    p{
            color: red;
            font-size: 12px;
    }
</style>

3)外部样式表(外链样式)

编写样式文件(.css)

4)优先级

行间样式优先级最高

3.书写规范(非行间样式)

1)颜色

简单的英文单词 red
使用16进制数据表示 #000000 rgb三原色
每两位一致可以简写: #f00
Rgb(0,0,0) 0-255

2)属性值

由多个单词构成必须有双引号。

4.Css的选择器

1)基本选择器

a)Id选择器:根据元素的id值选择元素，id值唯一

#p1{
    color: red;
}

b)标签选择器:通过标签名称选择元素

p{
    color: red;
}

c)类选择器:根据class属性值选择元素,class值允许重复

.red{
        color: red;
}

d)优先级

Id选择器 > 类选择器 >标签选择器

2)属性选择器:属性选择元素

[name]{
        border: 1px solid red;
}
[type="text"]{
                border: 1px solid red;
}

3)其他选择器

后代选择器
P span{
}
并集选择器:
#p1,span,h1{
        color: red;
}
交集选择器
p.red{
    color: red;
}
通配选择器
*{}

5.Css的基本样式

1)文本样式

Color:文本颜色
Text-align:元素中内容水平对齐方式 left/right/center
Line-height:设置行高
text-decoration:文本修饰

2)文字样式

Font-size:设置文字尺寸
font-family:”arial narrow”,”华文行楷”;
font-style: italic; 风格(倾斜)
font-weight: 900; 粗细: light,normal,bold 100-900
font:简写
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
font: italic 900 20px/300px “arial narrow”,”华文行楷”;

3)背景样式

background-color: red;
background-image: url(img/p1.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;
background: red url(img/p1.jpg) no-repeat 20px 20px;

4)宽高样式

Width height

5)列表样式

list-style-type: none;

6)其他样式

display: 控制元素的显示
block none

6.“盒子”模型

1)边框:

border-width: 1px;
border-style: dashed;
border-color: black;
border: 1px dashed black;

2)内边距: padding

真实内容距离边框之间的距离
- padding-left: 10px;
- padding-top: 10px;
- padding-bottom: 10px;
- padding-right: 10px;

padding: 10px 20px 30px 10px; 上右下左

3)外边距:边框距离父级组件或者其他兄弟组件边框的距离 margin

margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin: 10px;
margin: 10px 20px 30px 30px;
盒子宽度=内容宽度+2(padding+border+margin)

7.浮动和定位

1)浮动

Float:left/right
脱离文档流,遇到父级组件左边框或者已经浮动的兄弟组件右边框就停止浮动。

2)清除浮动

Clear: left / right /both

3)定位

 确定位置
Position: 定位方式
    Relative:   相对定位
       没有脱离文档流,通过top/left设置相对于父级容器的位置
    Absolute:   绝对定位
        脱离文档流,如果父级组件未设置定位方式，此时将会继续向上级寻找，直到找到window为止。

day2-----css