码迷,mamicode.com
首页 > Web开发 > 详细

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,导入样式表、选择器、常用基本样式

时间:2020-03-08 14:02:01      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:路径   默认   两种   span   元素   结构   css3 css   不同   字体大小   

# CSS层叠样式表

##  CSS层叠样式表
- CSS的作用
- HTML结构和CSS样式如何关联到一起(CSS引入方式)
> CSS作用:给HTML元素添加静态或者动态(JS)的CSS样式


###  CSS的引入方式 面试题
- 行内式:直接写在html标签的后面,在通过标签属性style来引入的,项目中从来不会用到
```
<div style="color: orange;">行内式</div>
```

- 内嵌式:将CSS代码单独放在style标签内,通过css选择器来选择html元素
    - style标签一般放在head标签内,title标签下 
```
   <style>
        div {
            color: orangered;
        }
    </style>
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
```
- 外链式:将CSS代码单独放的放在一个文件中,在通过link标签来进行引入的
    -  link标签一般放在head标签内,title标签下  

```
    <link rel="stylesheet" href="style.css" type="text/css">
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
rel="stylesheet",样式表,不可缺少
href=""样式表的地址、路径
type="text/css"类型、可以省略掉
```

- 导入式:将CSS代码单独放在一个文件中,再通过style标签来引入
   - 
```
 <style>
        @impor "style.css";
    </style>
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
```

####  外链式和导入式的区别 面试题
- 区别一: 外链式l是通过ink标签来引入的  导入式是@import一条语句,不是html标签,也不是css样式
- 区别二:加载的顺序不同,外链式的CSS样式表是和html标签同时加载的,而导入式是先把html标签加载完,在加载CSS样式表


###  CSS选择器
> 作用:为了获取html元素,并给html元素添加css样式
语法:css选择器{css属性名:css属性值;}
> css属性名和css属性值之间用":"隔开,用分号";"结束
```
 div{color: orangered;}
```

|选择器|语法|权重|
|-|-|-|
|标签选择器|div(html元素来当选择器)|1|
|类选择器|.div(通过给html元素添加class属性值,用class属性值的属性名字来当选择器)|10|
|ID选择器|#div1(通过给html元素添加id属性值,用ID属性值的属性名字来当选择器)|100|
|通配符选择器|"*"{css属性名:css属性值}|0 < * < 1|
|后代选择器|祖辈选择器 后代选择器{}|所有选择器权重相加之和|
|分组选择器|选择器1,选择器2,选择器3{css样式}|独立计算的,不会相加|
|子级选择器|父级选择器>子级选择器|所有选择器权重相加之和|
|伪类选择器||10|
|标签属性选择器|[标签属性名]{css样式}、[标签属性名=标签属性值]{css样式}|10|
|交集选择器||所有选择器权重相加之和|


#### 标签选择器
直接把html元素当作选择器来用
权重:1
> 标签选择器会选择html标签当中所有的标签
```
  <style>
        div{color: orchid;}
    </style>

    <div>1</div>
    <div>2</div>
```

#### 类选择器
将html元素后面添加class标签属性,利用标签属性值(类名)当作选择器来用,在标签属性值前面加一个"."
权重:10
> 标签属性值(类名)可以重复使用
> 标签属性值(类名)可以有多个,标签属性值(类名)之间用"空格"隔开
```
 <style>
        div{color: red;}
        .div2{color: green;}
        .title{font-size: 30px;}
    </style>

    <div>红色</div>
    <div class="div2">绿色</div>
    <p class="div2 title">段落</p>
    <p>11111</p>
```

#### ID选择器
 将html元素后面添加ID标签属性,利用标签属性值当作选择器来使用,在标签属性值前面加一个"#"
 权重:100
 > ID在页面中具有唯一性,不能重名
 > ID选择器是配合javascript来使用的
```
<style>
    #div1 {
        color: orange;
    }
</style>
<div id="div1">大盒子</div>  
```

#### 通配符选择器
匹配了所有的html元素
语法*{css属性名:css属性值}
权重:0 < * < 1
> 在项目中,通配符选择器不用,他比较消耗性能
> reset.min.css 清除默认样式表
```
* {
        margin: 0;
        padding: 0;
    }

```

#### 后代选择器(派生选择器)
在一个根元素(大盒子)的范围内,去查找它的后代元素
语法:祖辈选择器 后代选择器{}
权重:所有选择器权重相加之和
> 作用:增加权重,精确查找范围
```
  ul li{
       color: purple;
   }
   ul li span{
       color: red;
   }
   .box ul li span{
       color: green;
   }
   ul span{
       color: yellow;
   }
   .box ul span{
       color: blue;
   }

 <ul>
        <li>1</li>
    </ul>
    <ol>
        <li>2</li>
    </ol>
    <div class="box">
        <ul>
            <li>
                <span></span>
            </li>
        </ul>
        <ol>
            <li>
                <span></span>
            </li>
        </ol>
    </div>

```

#### 分组选择器
将同一份css样式,分给了不同的html元素,并给这个html元素添加css样式
语法:选择器1,选择器2,选择器3{css样式}
权重:独立计算的,不会相加



```
  div,p,h2,span{
        color: red;
    }
    <div class="box">大盒子</div>
    <p>段落</p>
    <h2>标题</h2>
    <span>行内小模块</span>
```

#### 子级选择器
存在包含关系的元素选择,通过他的父级选择子级
语法:父级选择器>子级选择器
权重:所有选择器权重相加之和

```
.div>ul>li {
       color: red;
   }
   <div class="div1">
        <ul>
            <li>1</li>
        </ul>
        <ol>
            <li>2</li>
        </ol>
    </div>

```

#### 伪类选择器
给html元素添加某种状态
例如:鼠标经过时的状态
权重为:10
> 伪类选择器在项目中常用的状态时"hover"
```
 /* hover 鼠标经过时的状态 */
    .nav a:hover{
        color: green;
        font-weight: bold;

```


#### 标签属性选择器
利用标签属性名和标签属性值当作选择器来使用,来选择html元素
语法:[标签属性名]{css样式}
           [标签属性名=标签属性值]{css样式}
权重:10
> 如果遇到HTML元素中带有class标签属性是,一般都用类选择器来选择html元素,不会使用标签属性选择器
```
    [title]{
        color: red;
    }
    [title=dhz]{}
    [class]{}
    [class=box]{}
    <div class="box" title="dhz">大盒子</div>
```
#### 交集选择器
两种选择器选择同属一个元素时,可以用我们的交集选择器来准确选择html元素
权重:所有选择器相加之和
> 交集选择器**标签选择器和类选择器集合**标签选择器和标签属性选择器相组合、变迁选择器和id选择器相结合、类选择器和类选择器相结合、类选择器和标签属性选择器相结合

```
 /* 最常用的 */
    div.box{
        color: red;
    }
    div[box]{
        color: red;
    }
    .box[title]{
        color: red;
    }
<div class="box" title="dhz"></div>

```


### CSS常用的样式

```
/* 高度 */
height: 100px;

/* 宽度 */
width: 100px;

/* 背景颜色 */
green;
   
/* 字体颜色 */
color: white;

/* 字体大小 */
font-size: 16px;

/* 文字水平居中 left居左是默认值,right居右,center居中 */
text-align: center;

/* 行高,文字垂直居中 */
line-height: 100px;

/* 文字加粗  bold加粗,normal去掉加粗*/
font-weight: bold;
   
/* 首行缩进 */
text-indent: 2em;

 /* 行间距 */
line-height: 26px;
font-size: 14px;
 
 /* 去掉下划线 */
text-decoration: none;

 /* 去掉小黑点/序号,去掉标签的默认样式 */
list-style: none;
```
 

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,导入样式表、选择器、常用基本样式

标签:路径   默认   两种   span   元素   结构   css3 css   不同   字体大小   

原文地址:https://www.cnblogs.com/wrfzxyy/p/12441904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!