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

前端学习-基础部分-css(一)

时间:2019-03-30 13:22:09      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:ima   imp   2.2.3   bbb   2.4   css   oct   外部   应用   

开始今日份整理

1.CSS的导入方式

CSS的导入方式主要是有内联模式,行内模式,外部样式表

1.1 内联模式

内联模式:直接在<head>中直接写css,例如

p{
        color:rgb(166, 226, 226);
    }
#设置P标签的颜色

1.2 行内模式

行内模式:在html中对应元素直接书写

<p style="color:cadetblue">第一段 世界大势,合久必分,分久必合</p>

1.3 外部样式表

外部样式表,主要是有俩种,一种为链接式,一种为外联样式表

<link rel="stylesheet" href="index.css">
<!-- CSS2.1的样式 -->
@import.url()

俩者的区别如下

  • 一个是全部导入后,才开始编译,包括css,<link>方式
  • 一个是先导入html进行编译,然后在将css文件加载到网页中  <@import>方式

2.CSS选择器

css的选择器主要分基本选择器以及高级选择器

2.1 基本选择器

技术图片

  • 通用元素选择器 *:  匹配任意元素,一般用于清楚网页的默认样式
  • 标签选择器:匹配所有指定标签的样式,不管样式有多深,都可以匹配,选中既所有,并不是单一的一个
  • id选择器:根据指定的id匹配标签 ,id在网页中全局唯一,一般留给后面js中调用,获取到标签
  • class类选择器:根据指定的class匹配标签

注:一定要有公共类的概念,不要试图用一个类完整一个网页,尽量把类拆分出来,每个类尽量的小,让更多的标签去使用,同一个标签可以携带多个类,类与类之间用空格隔开即可。

基本应用

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*标签选择器*/
        body{
            background: #b6bbb2;
        }
        div{
            background: #747F8C;
            color: red;
        }
        /*id选择器*/
        #h1{
            color: #501c56;
        }
        /*class选择器*/
        .c1{
            background: #2d4ca2;
            color: #41db50;
        }
    </style>
</head>
<body>
<h1 id="h1">id</h1>
<div>
    <p>内容1</p>
</div>
<span class="c1">class1</span>
<div>
    <p>内容2</p>
</div>
<span class="c1">class1</span>
<span class="c1">class1</span>
</body>
</html>
基本应用

 

2.2 高级选择器

2.2.1 后代选择器

2.2.2 儿子选择器

2.2.3 并集选择器

2.2.4 交集选择器

2.2.5 属性选择器

a

前端学习-基础部分-css(一)

标签:ima   imp   2.2.3   bbb   2.4   css   oct   外部   应用   

原文地址:https://www.cnblogs.com/gbq-dog/p/10626411.html

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