李洪强和你一起学习前端之(3)Css基础和选择器

大家好!

  经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说

有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候,并不是非常迅速,但是,我相信天道酬勤,我

相信勤能补拙,相信每一个一开始打算学习前端的人都有自己的梦想,或大或小,它一直激励着我们前行,就让我们不忘初心,一起进入下面的学习吧!

      Css基础

1.Css概念

CSS指层叠样式表(cascading  style  Sheets)

1.1 Css与html的关系

  Css以html为基础的

  Css主要设置的就是html标签中的属性样式css进行网页布局

1.2 Css语法

  选择器{属性:值;属性:值}

  选择器: 就是一个选择谁的过程

_______________________________________________

属性        赋值        介绍

_______________________________________________|

|color       |color:red      |前景色(文字颜色) |

_______________________________________________|

|font-size     |font-size:20px    |设置文字大小   |

_______________________________________________|

|width        |width:30px     |设置宽度     |

_______________________________________________|

|Height      |height:30px     |设置高度    |

_______________________________________________|

|Background-color |background-color:red |设置背景颜色  |

_______________________________________________|

|Text-align     |text-align:center/left/right|文字居中   |

_______________________________________________|

|Text-indent     |text-indent:2em    |首行缩进    |

_______________________________________________|

Px: 像素

注意: Text-align:center:在块级元素中可以让文字居中

注意:

  选择器

  浮动

  盒子模型

  定位

1.3Css书写位置介绍

  内嵌式写法:

<head>

  <meta  charset = "utf-8">  

  <style  type = "text/css">

    css代码

</head>

1.4选择器的分类

  基础选择器

    ->标签选择器

    ->类选择器

    ->id选择器

    ->通配符选择器

  符合选择器

    ->标签指定式选择器

    ->后代选择器

    ->并集选择器

1.5标签选择器

标签: 就是html中的标签.

用法:

标签名: {属性: 值;属性:值}

p{

  color:red;

  font-size: 25px;

  width:200px;

  height:50px

  background-color: pink

}

补充: 颜色的显示方式:

-> 直接设置对应的颜色的名称

p{

color: red;

}

-> 通过十六进制显示

  以#开头  0-ff

  color: #2934DE  十六进制显示

->通过rgb的方式显示

  R:代表的是红色(red)  0-255

  G:代表的是绿色(green)  0-255

  B:代表的是蓝色(blue)   0-255

rgba:

  a:设置透明度: alpha  0-1

  background-color:rgba(0,0,0,0.1);

1.6类选择器(重点)

用法:

  自定名称{属性: 值}

调用:

  标签通过class属性调用类样式

李洪强和你一起学习前端之(3)Css基础和选择器

特点:

  谁调用谁改变,多个标签可以同时调用一个类样式

  一个标签可以调用多个类样式(相当于人的名字)

<p>p1</p>

<p  class = "fontcolor  fontsize">p2</p>

1.7类的命名规范

李洪强和你一起学习前端之(3)Css基础和选择器

不能以纯数字或者数字开头定义类名

不推荐使用汉字定义类名

李洪强和你一起学习前端之(3)Css基础和选择器

不能以特殊符号或者以特殊符号开头("_"除外)

不建议使用标签名或者属性名定义类名

1.8  ID选择器

  用法:

李洪强和你一起学习前端之(3)Css基础和选择器

调用: 通过id属性调用样式

李洪强和你一起学习前端之(3)Css基础和选择器

特点: 不建议多个标签使用同一id选择器的样式(id和js配合使用)

  一个标签只能调用一个id样式

李洪强和你一起学习前端之(3)Css基础和选择器

1.9通配符选择器

  用法:

  *{//这里就是一个*号,不能取名字

属性: 值;

属性: 值;

}

李洪强和你一起学习前端之(3)Css基础和选择器

特点:

01-将页面中所有的标签都选中,设置样式

02-进行css页面样式的初始化

补充: 在写样式的时候,(用类选择器),如果有样式代码重复使用的时候,我们要提取公共类

李洪强和你一起学习前端之(3)Css基础和选择器

1.10字体相关属性

Font-size: 设置文字大小

Font-weight:设置文字加粗

Font-style: 设置文字斜体

Line-height:行高

1.11Font-family

  ->直接设置汉字

李洪强和你一起学习前端之(3)Css基础和选择器  

  -> 设置对应的英文

李洪强和你一起学习前端之(3)Css基础和选择器

可以设置unicode编码

Font-family可以设置多个值:

李洪强和你一起学习前端之(3)Css基础和选择器

1.12Font-weight

  取值方式:

  直接设置数字: 100-900

  bold(字体加粗)  效果于700-900

  normal(文字字体正常显示)

注意: 文字加粗显示,推荐使用 font-weight:700;

李洪强和你一起学习前端之(3)Css基础和选择器

1.13Font-style(斜体)

  italic  文字斜体显示

  normal 文字正常显示

1.14 Font属性联写

用法:

font: font-style  font-weight  font-size/line-height  font-family

李洪强和你一起学习前端之(3)Css基础和选择器

注意:

  ->font属性联写必须有 font-size  和font-family(其他属性可以不写)

  ->font-size和font-family的顺序不能换

2 标签指定式选择器

  用法:

  标签名.选择器名{

  属性: 值;

  属性: 值;

  }

  特点关系: 既....又....

李洪强和你一起学习前端之(3)Css基础和选择器

或者:

李洪强和你一起学习前端之(3)Css基础和选择器

3.后代选择器

  特点:

  标签之间必须属于嵌套关系

用法:

  选择器 + 空格 + 选择器{属性: 值; 属性值: 值...}

  特点: 选择器之间必须有空格

关系: 父与子的关系

4 并集选择器

用法: 选择器,选择器,选择器{属性: 值}

作用: 将样式集体声明,css样式初始化

特点: 并集选择器之间必须用逗号隔开!

李洪强和你一起学习前端之(3)Css基础和选择器

margin: 0 auto;  让盒子居中显示

好了,今天的学习就到此为止了,是不是感觉到学习的知识越来越深了.温故而知新,学习一遍也是不够的,而且应该做大量的练习,相信我们在成功的路上越走越远!

                      李洪强

                2017年3月15日 于 北京

  

上一篇:李洪强和你一起学习前端之(1)Html基础


下一篇:Shell 循环读取文件