HTML5+CSS3学习记录

仅供个人记录学习，还不足以广播教学，望海涵和指正

CSS的三种样式

1. 行内样式

    <p style="color: red; font-size: 40px; border: 5px dashed purple;">我是段落标签</p>

2. 页内样式

    <style>
    div{
        color: red;
        font-size: 44px;
        border: dashed;
    }
    </style>

3. 外部样式

in .css
    div{
    color: antiquewhite;
    font-size: 66px;
    background-color: aqua;
    }

CSS选择器

• 标签选择器

div{
    color: red;
}

• 类选择器

.test1{
    color: brown;
}

• id选择器

#main{
    font-size: 100px;
}

• 并列选择器

div, .test1{
    color: cadetblue;
}

• 复合选择器

div.test1{
}

• 后代选择器

div p{
}

• 直接后代选择器

div>p{
}

• 相邻兄弟选择器

### div + p{
}

• 属性选择器

div[name="jack"][age]{
}

• 伪类(focus是输入类焦点，hover是当鼠标移动到该标签上时触发)

input:focus{
}

CSS的优先级别

important > 内联 > id选择器 > 类选择器 > 伪类 |属性选择 |伪元素 | 标签 > 通配符 > 继承

选择器的权值：
通配符：0
标签：1
类：10
属性：10
伪类：10
伪元素：10
id：100
important :1000

标签的类型

• 块级标签（独占一行，并且可以自由设置宽高）

代表有div p h1 h2 ul li

• 行内标签（行内可以存放多个，根据内容默认宽高）

代表有span a label

• 块级-行内标签(行内可以存放多个，可以自由设置宽高)

代表有input button

隐藏标签 display: none; 或者 visibility: hidden;

块级和行内标签的转换

1. 块级->行内 display: inline
2. 行内->块级 display: block

CSS的继承性

1. 可继承（color，font-size 文本性质的）
2. 不可继承

background-color
display
margin
border
padding
background
overflow

CSS的常用属性

• background（图片铺展方式）

background: url("img/img_02.jpg")  no-repeat;/*不平铺*/

• background-size

background-size: cover;/*拉伸*/

• cursor（规定要显示的光标的类型（形状））

cursor: progress;

• font-weight(文字粗体)

font-weight: bolder;

• text-decoration(文本修饰)

text-decoration: line-through;
none 可以去除<a>下划线

• text-indent(首行缩进)

text-indent: 30px;/*7%*/

• overflow(处理超出的内容)

overflow: scroll;

• list-style(列表属性样式)

list-style: square;

盒子模型

盒子模型.jpg

CSS3的新特性

• 盒子阴影

box-shadow: -10px -5px 10px green

• 圆角

 /*border-radius: 20px;*/
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;

• RGBA颜色

background-color: rgba(255,0,0,1.0);

• 文字阴影

text-shadow: 5px -5px 10px purple;

脱离标准流

任何一种类型的标签一旦脱离标准流，就会被强制转成行内-块级标签

float: left;

CSS布局

• 父视图添加关系

position: relative;

• 相对于子视图定位

position: absolute;
/*定位*/
right: 20px;
bottom: 20px;

• 相对于浏览器定位

/*停留在浏览器底部*/
position: fixed;
bottom: 20px;

标签的居中

所有的标签水平居中：

• 行内标签和行内-块级标签：在父标签中设置text-align
• 块级标签：在自身设置margin：0 auto

所有标签垂直居中

• 行内标签和行内-块级标签：在父视图设置line-height
• 块级标签：

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);

距离填充规律

1. padding：10px 5px 10px 6px

上右下左顺时针方向

2. padding：10px 5px 10px

上，左右，下

3. padding：10px 5px

上下，左右

4. padding：10px

上下左右都是10px

边框属性

border:10px soild red

按顺序是width，style，color

box-sizing属性

• content-box

宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

• border-box

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。