前端零基础教学开始第二天 02 -day _ Css 的发展历程

引言: 我所教授的前端知识适用于纯小白,零基础。未来发展方向是前端领域,需要系统学习的人,从零到1的人 转载需备注地址---- 我是(我想静静)一个要把代码写出艺术感的人! 写代码的男人很帅气!

    说起HTML,是一个超文本标记语言,他只关注内容的语义,css的出现,拯救了混乱的HTML,Css 最大的贡献就是,让HTML从样式中脱离苦海,实现了HTML专注去做结构呈现

    1、CSS初识 Css全称CasCading Style Sheets 通常称为Css 样式表或层叠样式表(级联样式表),就是网页的美容师,给标签设置样式,外观显示样式。

  ##  正课开始:

  ##  1、引入css 样式表 (书写位置)

css可以写到那个位置?是不是一定要写到html文件里面呢? 答案当然是 否了,

```

**重点 **:样式书写的三种格式  行内, 内部样式表 , 外链 

```

## 1、1 行内样式 也叫(内联样式 少用)

通过标签的style 属性来设置元素的样式

<标签名 style="属性1:属性值;属性2:属性值2;"></标签名>

<div style="color:red;font-size: 12px">前端任重而道远</div>


## 2、1 内部样式表 (内嵌样式表  常用)

内嵌样式是将css代码集中写在HTML 文档中的head 头部标签中,并且用style 标签定义

<style type="text/css">

选择器{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

</style>

<style type="text/css">

div{

color: piink;

font-size: 12px;

}

</style>

    <body>

    <div>加班中</div>

    <div>加班中</div>

    <div>加班中</div>

    </body>



##    3、1 外部样式表(外链式  &nbsp 实际开发用)

    链入是将所有的样式放在一个或多个以css为扩展名的外部样式表中,通过link 标签将外部样式表文件连接到html文档中

    href 进行链入  文件名是  day.css 文件名以css 结尾


    htef : 定义所连接外部样式表的文件url

type : 定义所连接文档的类型

rel  :定义当前文档与被连接文档之间的关系定义为stylesheet 样式表

    <link rel="stylesheet" type="text/css" href="day.css">


    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="">

    </head>


样式表总结:      优点     缺点     使用情况

行内样式表 书写方便权重高     没有实现样式和结构分离    较少

内部样式表 部分结构和样式相分离 没有彻底分离        较多

外部样式表 完全实现结构和样式相分离 需要引入   最多

## 样式书写一定要展开格式 用这样

.style{

display:block;

width:50px;

}

## CSS 选择器 重点 重点 重点!!!

css  选择器 干啥的? 选择标签用的,可以把我们想要的标签选择出来 必须有记住

CSS 基础选择器

1、标签选择器

2、类选择器    类选择器使用:不要纯数字或者数字开头,中文等命名,尽量使用英文字母来表示如果比较复杂使用- 的化尽量使用中- 杠 不要用下_ 有容有兼容问题

3、多类名选择器

4、id选择器

5、id 选择器和类选择器

6、通配符选择器

1、1 标签选择器 (元素选择器)

    标签选择器是指用HTML 标签名作为选择器,按标签名称分类

      ***优点快速为页面中同类型的标签统一样式,同时缺点也是不能设计差异化样式

    div{

color: green;

font-size: 14px;

}

p{

    color: orange;

    font-size: 20px;

}

```

<div>前端加班中</div>

<div>前端加班中</div>

<div>前端加班中</div>

<p>前端加班中</p>

<p>前端加班中</p>

<p>前端加班中</p>

```

1、2 类选择 实际开发中用的最多

    调用类选择器 给第一个div 谁调用谁生效,不调用不生效,class 是类 在style 里面 加 . 点 开始


    特点:多个标签可以调用同一个类选择器 ,但是谨记一个标签只能有一个 class ,但是一个标签可以同时调用多个类选择器

```

<style type="text/css">

.box{

color: green;

font-size: 14px;

}

.p{

    background:pink;

}

.sty{

    width:400px;

    heigth:300px;

}

</style>

<div class="box">加班写代码</div>

<div class="box p  sty">加班写代码</div> 调用多个类选择器

<div>加班写代码</div>

```

## 1、3  id 选择器使用 #  进行标识,后面紧跟id名其基本语法格式如下

    id 选择器

特点 1、一个id 选择器只能被调用一次,多次使用不符合w3c 规范 js调用会出错

特点 2、 一个标签不能同时调用多个id 选择器

特点 3、 一个标签可以同时调用类选择器和id 选择器

#box{

color: orange;z-index:

font-size:100px;

}

.box2{

    width:300px;

    height:400px;

}

<body>

    <div id="box">嘿嘿</div>

    <div id="box" class="" >嘿嘿</div>

    </body>


## 1.4通配符选择器

    通配符选择器 页面上所有的选择器,使用较少

    *{

color: red;

font-size: 100px;

}

    <div>01</div>

<h2>02</h2>

<p>03</p>

## 2. CSS 字体样式属性

    属性:用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,相对长度单位比较常用。推荐使用相熟单位px

      相对长度单位  说明

      em 相对于当前对象内文本的字体尺寸  1em = 16像素

      px                    像素最常用,推荐使用


    .box{

font-size:40px;

font-family: "宋体";

font-weight: 400;

font-style:normal; 正常

line-height:10px;  使用最多的是像素 10px的百分之200% 是20

color:文本颜色

}

font-siez: 设置字体大小

font-family : 设置字体

现在网页中普遍使用14px  尽量使用偶数数字 字号

font-weight:字体粗细 normal正常,bold加粗 bolder 更粗 或者使用数字 100-900  100-400 是正常,  500 以后是加粗,实际开发700

font-style:  字体风格 normal  正常    italic: 浏览器会显示斜体的字体样式

                    oblique:浏览器会显示倾斜的字体样式

line-height:  控制行与行之间的距离 单位使用 px

![](https://user-gold-cdn.xitu.io/2018/12/16/167b6b9eb577064d?w=1200&h=666&f=png&s=110403)

## 3、Css 外观属性

        1、颜色名称

        2、十六进制从 0-9 从 a-f

    .box{

        color:pink;

        text-align:  left;

        text-indent: 2em; 1个em是1个汉子的大小 首行缩进

        text-decoration: none; 一般在a标签时候使用a 标签带下划线

    }

```

    <div class="box"> Css 外观属性 </div>

```

## text-align: 文本水平对齐方式有三个 默认值是left , center right

1、管理内容的水平对齐方式

2、 text-indent: 文本首行缩进一般使用em

3、text-decoration: none; 默认值是none  underline定义文本下一条线

## Css 复合选择器

    复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签


1、交集选择器由两个选择器构成,找到的标签必须满足,既有标签一的特点,也有标签二的特点。

交集选择器既又的关系,尽可能的少使用

```

.box{

color: red;

font-size:100px;

}

div.box{

text-decoration: underline;

}

```

<div class="box">交集选择器1</div>

<div>交集选择器2</div>

<p class="box">交集选择器2</p>

2、 后代选又称为包含选择器,用来选择元素或元素组的后代,写法把外层标签写在前面,内层标签写在后面,中间用空格分隔开,当标签发生嵌套时,内层标签就成为外层标签的后代

    发生前提:包含关系

特点:1父元素在前,子元素在后

```

div p  span{

color: pink;

font-size:20px;

}

先找div 然后 p 然后 span  span发生了改变 后代选择器

<div> div 是父元素

<p>p 是子元素

<span>span是p的子元素</span> 

</p>

</div>

```

## 3、开发者工具使用,代码出现问题第一时间找浏览器

使用浏览器:Chrome F12 Mac电脑我的打开方式是com + shift + c

com + 加号 可以放大代码

com + 0 恢复浏览器大小

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,053评论 0 40
  • 一.CSS描述 CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要是用于定义HTM...
    snowy_sunny阅读 1,040评论 0 4
  • 基本常识与实践 css的每一个语句包括一个场所,以及这个场所的一个属性,还要应用到这个属性一个样式,一个典型的cs...
    丁俊杰_阅读 1,032评论 0 0
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,023评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,192评论 0 5