大家好!

　　经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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属性调用类样式

特点:

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

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

<p>p1</p>

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

1.7类的命名规范

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

不推荐使用汉字定义类名

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

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

1.8　　ID选择器

　　用法:

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

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

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

1.9通配符选择器

　　用法:

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

属性: 值;

属性: 值;

}

特点:

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

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

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

1.10字体相关属性

Font-size: 设置文字大小

Font-weight:设置文字加粗

Font-style: 设置文字斜体

Line-height:行高

1.11Font-family

　　->直接设置汉字

　　

　　-> 设置对应的英文

可以设置unicode编码

Font-family可以设置多个值:

1.12Font-weight

　　取值方式:

　　直接设置数字: 100-900

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

　　normal(文字字体正常显示)

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

1.13Font-style(斜体)

　　italic　　文字斜体显示

　　normal　文字正常显示

1.14 Font属性联写

用法:

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

注意:

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

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

2 标签指定式选择器

　　用法:

　　标签名.选择器名{

　　属性: 值;

　　属性: 值;

　　}

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

或者:

3.后代选择器

　　特点:

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

用法:

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

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

关系: 父与子的关系

4 并集选择器

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

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

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

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

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

　　　　　　　　　　　　　　　　　　　　　　李洪强

　　　　　　　　　　　　　　　　2017年3月15日 于 北京

　　

李洪强和你一起学习前端之(3)Css基础和选择器的更多相关文章

  1. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  2. 李洪强和你一起学习前端之(1)Html基础

     1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)   Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...

  3. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  4. 李洪强和你一起学习前端之(8)CSS复习

    今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义 ...

  5. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

  6. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

  7. 李洪强和你一起学习前端之(4)HTML5介绍

    1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...

  8. 李洪强iOS开发之-环信03_集成 SDK 基础功能

    李洪强iOS开发之-环信03_集成 SDK 基础功能 集成 SDK 基础功能 在您阅读此文档时,我们假定您已经具备了基础的 iOS 应用开发经验,并能够理解相关基础概念. SDK 同步/异步方法区分 ...

  9. 李洪强iOS经典面试题144-数据存储

    李洪强iOS经典面试题144-数据存储   数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

随机推荐

  1. Linq:Group By用法

    1.简单形式: var q =from p in db.Products group p by p.CategoryID into g select g; 语句描述:使用Group By按Catego ...

  2. SVM核技巧的经典解释

    支持向量机: Kernel by pluskid, on 2010-09-11, in Machine Learning     68 comments 本文是"支持向量机系列"的 ...

  3. deferred rendering with msaa

    https://docs.nvidia.com/gameworks/content/gameworkslibrary/graphicssamples/d3d_samples/antialiasedde ...

  4. FreeMarker最简单的例子（2）

    二.通过String来创建模版对象,并执行插值处理 代码: package com.abc; import freemarker.template.Template; import java.io.O ...

  5. [ES6] 07. Default Value for function param

    Normally, we can set default value for function param: //Here use "Hello" as default param ...

  6. java nb

    Java领域有非常多著名的人物.他们为Java社区编写框架.产品.工具或撰写书籍改变了Java编程的方式. 本文是<最受欢迎的8位Java牛人>的2.0版本号. PS:排名不分先后.本文的 ...

  7. 文法设计，对于void的修改

    //这个文件主要是用来描述当前源语言的词法结构和语法结构 //当前语言是c语言的一个子集,因此里面所有的描述大家都很熟悉 //注意,当前语言并不支持预处理,因为c预处理比较复杂,而且楼主能力低下,因此 ...

  8. activemq集群搭建Demo

    activemq5.14.5单节点安装Demo 第一步:创建集群目录 [root@node001 ~]# mkdir -p /usr/local/activemqCluster 复制单点至集群目录 [ ...

  9. AWS RDS mysql无法连接的问题

    rds创建后,无法连接mysql 检查安全组规则是否配置了 1. 2. 这样你的EC2就可以访问了.如果还不行,检查数据库是否和EC2在同一 VPC内. 官方文档:https://docs.amazo ...

  10. thinkphp 表名 大小写 窍门

    我们有一个表auth_group_access,那么如何使用呢?在使用M方法时,对于带下划线的表名,可以采用如下方法. M('AuthGroupAccess');对应sql语句SQL: SHOW CO ...