HTML+CSS总览概述

　　　　　　　　　　　　　　　　　　　 HTML + CSS        

1.HTML(hypertext markup language) :超文本标记语言

2.html是纯文本的便签语言，不写标签，也可以显示文本内容，只是内容没有语义

3.HTML主题分为2个部分 head 和 body 部分, head 里面放的辅助内容如:文字的格式,关联链接,body 里面主要显示内容,一切需要显示的内容都放在 body 里面如:音频,视频,图片,链接

4.HTML 的标签都可以带有属性,属性直接放在标签的后面

5.常用的标签对: <title></title> -> 设置标题

    <h1></h1>....<h6></h6>->设置文本字体的大小     <div></div> -> 分割页面布局

    <p></p>和<br></br> 换行

<strong></strong> 加粗

<img> 图片

<a href></a> 链接

<button></button> 按钮

<input></input> 文本输入

<ol></ol> 列表标签

<ul></ul> 无序列表

<li></li> 列表中的元素

 

6.CSS 主要用于对 body 内容进行一些属性,样式的填充

7.与 CSS 关联,需在 head主体里面使用 link 导入链接

8.http : 超文本传输协议，HyperText Transfer Protocol (HyperText Transfer Protocol over Secure Socket Layer)

 https 则是具有安全性的ssl加密传输协议

 

CSS 部分属性内容

一． 权重问题

1.1同一个标签携带多个类名，有冲突的

<style type="text/css">

       p{

         color: black !important;

         font-size: 20px;!important; 这个是错误的使用方法，分号代表这句话已经结束了

         font-size: 60px important; 这个错误使用，没有添加感叹号

         font-size: 60px !important; 这个是正确使用

        }

.spec1{

color: blue;

}

.spec2{

color: red;

}

</style>

Important是英文中重要的意思，我们可以通过语法：

color: yellow !important; 通过important提高一个属性的权重，这个属性的权重就是无穷大

注意：

一． ！important提升的是一个属性，而不是一个选择器

二． ！important无法提升继承的权重，该是0还是0

三． 当前的！important不影响就近原则

比如HTML结构

<div>

<p>欢迎来到图书馆</p> 

</div>

有CSS的样式

<style type="text/css">

div{

color: red !important;

}

p{

    color: blue;

}

</style>

由于div是通过继承性来影响文字颜色的，所有！important无法提升它的权重，权重依然是0，干不过p，p标签是实实在在选中文字，所以字体还是蓝色

 

二． 盒子模型

2.1、一个盒子主要属性就5个：width，height。Padding，margin， border

width是“宽度”的意思，CSS中width指的是内容的宽度，而不 是盒子的宽度。

height是“高度”的意思，CSS中height指的是内容的高度，而 不是盒子的高度

padding是“内边距”的意思

border是“边框”

margin是“外边距”

 

下面的盒子真实占有的大小

div{

width: 200px;

height: 200px;

border: 1px solid red;

padding: 10px;

margin: 100px;

float: left;

}

 

真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding

2.2、 认识padding

padding内边距，padding背景颜色一定和内容区域一样的，background-c olor将填充border以内所有的区域

           padding-right: 10px;

padding-left:20px;

padding-top:30px;

padding-bottom:40px;

 

2.3、margin

margin-left: 100px;

margin-top: 100px

margin-bottom: 100px

margin-left: 100px  

注意：

使用的时候与float会相互影响，可以使用clear：both，清除浮动.

margin：0 auto  这个盒子居中，不是居中文本，必须是有明确width，

padding本质上指父子关系，margin是兄弟的关系

 

2.4、border

边框的三要素：粗细、线性、颜色

dashed、dotted、solid、double、groove、ridge、inset、outset

 

 

1） 块级元素

● 霸占一行，不能与其他任何元素并列

● 能接受宽、高

● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

● 与其他行内元素并排

● 不能设置宽、高。默认的宽度，就是文字的宽度。

Display:”显示模式”，用来修改元素的行内、块级的性质

Inline就是“行内”

一旦给当前一个便签设置 display：inline 这个标签立刻改变为行内元素与span 类似没有区别

一旦给当前一个便签设置 display：block 这个标签立刻改变为块级元素与div类 似没有区别

三． 浮动FLOAT

清除float的方法：

1. clear：both（表示当前自己内部的元素不受其他盒子的影响）

2. overflow：hidden（超出范围内就隐藏）

3. 浮动的元素，只能被有高度的盒子高度，就是说，如果盒子的内部有 浮动，那么浮动会在一定范围内互相影响（加高法）

3.1、LINE-HEIGHT

css中的任何文本都有有行高（line-height）,行的高度，必须有元素对应的 高度，才能使用line-height

text-indent:2em; 首行空二个汉字的格，单位比较奇怪，叫做em就是汉字 的宽度。Indent-缩进的意思

3.2、font

font-size（尺寸） 、 line-height（行高）、 font-family(字体)

页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需 要其他的字体，那么需要切图。英语：Arial 、 Times New Roman

 

3.3、超级链接伪类

:link  表示， 用户没有点击过这个链接的样式。 是英语“链接”的 意思。

:visited 表示， 用户访问过了这个链接的样式。 是英语“访问过 的”的意思。

:hover 表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的 意思。

:active 表示， 用户用鼠标点击这个链接，但是不松手，此刻的样 式。 是英语“激活”的意思。

3.4、z-index  表示的是谁压着谁，数值大的压着数值的小

切记：只有定位了元素，才能有z-index值，不管是绝对定位还是相 对定位，注意float的东西不能使用z-index默认是为0

转载于:https://www.cnblogs.com/fengqiqi/p/6007544.html