前端html基础

发表于   |   分类于   |     |   次阅读   |   阅读次数

长时间专注于项目的开发，项目只是对基础知识片面的应用，适当的回顾一下最最基础的知识点。觉得资料中知识点有点零散，回顾的同时又来整理了一下…

字体样式

color:red;//字体颜色
font-size:10px;//字体大小
font-weight:500;//字体粗细
//在开发网站时，不会仅仅只设置一种样式的字体
//字体格式，还有："SimSun"即宋体 
font-family:"microsoft Yahei";
font-style:italic;//斜体,还有oblique实体
text-align:center;

选择器

标签选择器： 

<span>1111</span>
span {
    color:green;
}

类选择器： 

<span class="spn">2222</span>
.spn {
    color:green;
}

id选择器： 

<span id="spn">3333</span>
#spn {
    color:green;
}

后代选择器： 

后代选择器是：标签内的所有后代中筛选  
.div1 div .p3 span {
    color: red;
}

群组选择器： 

p,span {
    color: red;
}

通配符： 

 * ｛
     color:red;
｝

交集选择器：

交集选择器是：既是p标签，又是类名为aa的标签
p.aa {
color:red;
}

css样式的特点

css样式的继承

后代元素如果没有自己的样式修饰，就会继承父元素的样式。

css样式的优先级

当样式发生冲突的时候：
（1）id选择器>类选择器>标签选择器
（2）当选择器类型相同的时候，选择器越多 优先级越高。

css样式设置的标签类型

行内标签：宽高可设置，并且不单独占一行

某标签 ｛
    display:inline-block;
｝

块级标签：宽高不能设置，单独占一行

某标签 ｛
    display:block;
｝

伪类

伪类:即a标签被点击的4种状态的样式设置

点击前的状态：

a:link {
    background-color: blue;
    color: white;
}

鼠标悬浮的状态

a:hover {
    background-color:yellow;
}

鼠标点击瞬间的状态

a:active {
    background-color: black;
}

鼠标点击完成后的状态

a:visited {
    background-color: pink;
}

背景图片

background-image:url(./1.png);//背景图片，默认是平铺
background-repeat:no-repeat;背景是否重复的