大家好!

　　经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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. 【笔记】选择框 change 事件获取内容

    还记得之前做过一次js 的联动效果,在获取下拉框change事件后的 value 时,当时的我做得比较费劲. 现在看了高程的表单脚本那一章之后发现有一个更好的方法,那就是直接获取下拉框change 事 ...

  2. JList的基本操作

    1.初始化并添加元素DefaultListModel leftListModel=new DefaultListModel();String[] items = Model.getPairs();fo ...

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

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

  4. 有些类库（node.js版）

    做项目经常会用到好些类库,大的还好说,用的多了自然记住了名字.如express. 但也有些小而精湛的类库,不仅提供了良好的功能,本身的实现也值得研究.暂记于此. 1.web类 request    简 ...

  5. org.w3c.dom(java dom)解析XML文档

    位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会不理想 首先来了解点Java DOM 的 API:1.解析 ...

  6. Windows下如何安装 Composer

    如何安装 Composer Windows下如何安装 Composer 下载 Composer 安装前请务必确保已经正确安装了 PHP.打开命令行窗口并执行 php -v 查看是否正确输出版本号. 打 ...

  7. [Mybatis - 1A] - Cause: java.sql.SQLException: Column count doesn't match value count at row 1

    严重: Servlet.service() for servlet [springMVC] in context with path [/ExceptionManageSystem] threw ex ...

  8. linux svn恢复删除的文件夹和文件（转）

    我觉得在window下面,查找被删除的svn文件夹和文件是件比较麻烦的事,恢复就更麻烦了.有的时候,命令还是比鼠标要好用的. 下面做一个例子来说明一下,删除和恢复的例子. [root@BlackGho ...

  9. C语言-常用函数处理

    1.使用fgets #define SLEN 50 char str[SLEN]; fgets(str, SLEN, stdin); i = ; while (str[i] != '\n' & ...

  10. 两周赚100万 在Google Play做对了什么

    http://tech.it168.com/a2013/0301/1457/000001457913_all.shtml