大家好!

　　经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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. jquery load 方法回显数据

    使用jQuery对象.load()方法 load() 方法的作用是可以通过 AJAX 请求从服务器加载数据,并把返回的数据直接放置到指定的元素中. 该方法使用起来非常简单,大大简化了ajax开发 语法 ...

  2. C语言中setjmp与longjmp学习笔记

    C语言中setjmp与longjmp学习笔记 一.基础介绍 头文件:#include<setjmp.h> 原型:  int setjmp(jmp_buf envbuf) ,然而longjm ...

  3. [转] SQL Server 批量 停用/启用 外键约束

    本文转自:http://hi.baidu.com/wangzhiqing999/item/ca699308de4f1ff9a1103429 今天百度知道上面,看到这样一个要求: 现在有一个库,有很多张 ...

  4. JStorm模型设计

    问题描述 1.在流式计算中经常需要对一批的数据进行汇总计算,类似SQL中的GROUP BY.在用JStorm来实现这一条简单的SQL时,面对的是一条一条的数据库变化的消息(这里需要保证有序消费),其实 ...

  5. 【转载】WebStorm安装 & Nodejs-Express Demo

    试试下面这个方法: http://www.sdifenzhou.com/?p=6941 从这里下载 http://pan.baidu.com/share/link?shareid=2512210975 ...

  6. Android 开发之 ---- bootloader （LK）

    LK是什么 LK 是 Little Kernel 它是 appsbl (Applications ARM Boot Loader)流程代码  ,little kernel 是小内核小操作系统. LK ...

  7. HTTP状态码及说明

  8. TestNG 一、 概论

    一. 概论         TestNG,即Testing, NextGeneration,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架,即可以用 ...

  9. Win8 Metro中文件读写删除与复制操作

    Win8Metro中,我们不能在向以前那样调用WIN32的API函数来进行文件操作,因此,下面就来介绍一下Win8 Metro中文件的读写操作. 1 Windows 8 Metro Style App ...

  10. 如何利用ps去批量完成一套任务

    作为前端开发人员,不说设计你会不会,ps作为一个工具来说,前端开发人员还是要熟悉才行的 做了一个项目,客户自己上传了图片,他表示上传非常慢,我们表示不解,为何那么慢,网络问题吗,经过看了她的图片,发现 ...