大家好!

　　经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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. Unity-EasyTouch插件之One Finger

    这节课,我们主要讲下单个手指的测试.比如单击啊,双击啊,拖动,单手滑动等. 单击: public class TouchTest : MonoBehaviour { // Subscribe to e ...

  2. Julia：高性能 GPU 计算的编程语言

    Julia:高性能 GPU 计算的编程语言 0条评论 2017-10-31 18:02    it168网站 原创 作者: 编译|田晓旭 编辑: 田晓旭 [IT168 评论]Julia是一种用于数学计 ...

  3. linux之fork()函数详解

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程, 也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...

  4. php上传漏洞获root权限

    首先用nmap检测一下目标网站的系统服务和一些端口banner的信息.   Nmap -v -sT -sV -O -P0 -oX test.xml ***.kr   21/tcp   open     ...

  5. OSG立体模式下动态修改相机远近裁剪面的实现

    1. 非立体模式下动态修改相机远近裁剪面 class GLB_DLLCLASS_EXPORT CGlbGlobeClipHandler : public osg::NodeCallback    { ...

  6. 判断一组checkbox中是否有被选中的

    if ($(":checkbox[name=subcheck]:checked").size() == 0) { alert("请至少选择一条记录进行删除操作!" ...

  7. automake连载--Linux下使用automake入门

    http://blog.csdn.net/shanzhizi/article/details/30246587 近来重要要总结一下automake的用法了,连载几篇网上已有的文章,以供参考. 作为Li ...

  8. 在表单里面检查用户名是否存javascript

    function CheckUser(fn) { $.get("/Pages/Handler/CheckExistHander.ashx", { "txt_UserNo& ...

  9. 在笛卡尔坐标系上描绘y=x^2-4/x^2-2x-3曲线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  10. Kolla 4.0.0环境下VIP无法迁移问题排查

    VRRP无法切换VIP的问题分析: Keepalived的配置文件:/etc/kolla/keepalived/keepalived.conf当中,nopreempt选项是影响切换的因素之一,另一个因 ...