大家好!

　　经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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. synchronized 线程同步

    synchronized  通常用来形容一次方法的调用,调用一旦开始,调用者必须等到方法调用返回后,才能继续执行后续的操作. 1.demo package demo1; public class My ...

  2. jQuery.toggleClass() 和detach()方法详解

    一.toggleClass()函数: toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名.所谓"切换",就是如果该元素上已存在指定的类名 ...

  3. C++ 初始化列表（转载）

    何谓初始化列表 与其他函数不同,构造函数除了有名字,参数列表和函数体之外,还可以有初始化列表,初始化列表以冒号开头,后跟一系列以逗号分隔的初始化字段.在 C++中,struct和class的唯一区别是 ...

  4. POJ 1275-Cashier Employment(差分约束系统)

    题目地址:id=1275">POJ 1275 题意: 给出一个超市24小时各须要R[i]个雇员工作,有N个雇员能够雇佣.他们開始工作时间分别为A[i],求须要的最少的雇员人数. 思路: ...

  5. win8.1 64位环境搭建android开发环境

    1.下载JDK,http://www.oracle.com/technetwork/java/javase/downloads/index.html,选择版本 2.安装刚刚下载的JDK 3.环境变量配 ...

  6. LINUX 下编译不通过解答

    在linux下编译android源码或者webkit等程序源码时,不论在源码下加什么错误,编译器都默认正确,检索不到错误,此时,可能是之前编译的生成文件默认编译器不再检索编译新修改过的文件,只是发现修 ...

  7. IT博客汇

    做了个博客聚合网站,收集了一堆IT牛人的博客RSS订阅,每天自动更新. 一旦关注的作者发表了新的博客,第一时间就能看到. 地址在这儿,欢迎参观: http://www.wrox.cn

  8. activemq持久化配置，设置为主从模式（带复制的主从模式，应用mysql数据库）

    配置文件如下<!--    Licensed to the Apache Software Foundation (ASF) under one or more    contributor l ...

  9. jstat的用法

    转载:http://www.51testing.com/html/92/77492-203728.html 用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指令基本上满足 ...

  10. Discuz常见小问题2-如何修改整个网站的默认字体为微软雅黑

    界面-风格管理,然后点击默认模板的编辑,在正常字体和小号字体前面加上你要的字体(比如微软雅黑,XXX,XXX),挨个排到后面,如果前面的字体没有则显示后面的 修改之后的效果(注意你不要在页面定义别的C ...