亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜负努力的人,每一步都算数,做iOS开发的我,我也能证明自己可以做前端,最近公司让我做前端的页面,一开始是恐惧的,这个我怎么会,但是谁都不是一开始天生就会前端的,这几天我一直没有休息好,前天晚上,为了学习前端,我一直到凌晨的三点点才睡,加上最近一直以来睡不好就头疼的毛病,真的让我吃不消,没有休息好的情况下,昨天上班,真的很累,昨晚上一直学习到凌晨,还好睡了个好觉,现在感觉好多了,我相信: 明天的你,一定会感谢今天努力的你

下面开始今天的学习吧!

1 复习昨天的知识

概念: 层叠样式表或者叫级联样式表

内嵌式写法:

<head>

　　<style  type = "text/css"></style>

</head>

语法:

选择器: {属性:值;}

选择器就是选择标签的一个过程

属性: 　　　　　　　赋值　　　　　　　描述

color　　　　　　　Color: red;            文字颜色　

Font-size　　　　　Font-size:20px;　  文字大小

Font-family           font-family:宋体;　 文字字体

Font-weight　　　  Font-weight:bold(700)| normal;  文字加粗

Font-style　　　　　Font-style:italic | normal;   文字斜体(italic)

Background-color　Backgroundcolor: red;　　背景颜色

Width/height　　　 Width: 12px;　　　　　　宽度和高度

Text-align　　　　  Text-align:center;　　　　文字居中

Text-indent　　　　Text-indent:2em;　　　　首行缩进

Margin　　　　　　 Margin:0 auto　　　　　　盒子居中显示

1.1基础选择器

1.1.1标签选择器

　　P{属性:值;}

类选择器

　　定义:

　　.fontcolor{color:red}//一定要前面的点写上

　　调用:

　　<p  class = "fontcolor">文字</p>

　　特点:

　　->谁调用,谁改变

　　->一个标签可以同时调用多个类样式

　　->多个标签可以同时调用一个类样式

　　命名规范:

　　-> 不推荐使用汉字定义类名

　　-> 不推荐使用标签名或者属性名定义类名

　　-> 不能使用纯数字或者特殊字符("_"除外)定义类名

1.1.2id选择器

　　定义:

　　#自定义名称{属性: 值;}

　　调用:

　　标签通过 id = "自定义名称"

　　注意:

　　页面中的表id名称不能重复

　　同一个标签不能调用多个id样式

1.1.3通配符选择器

　　*{属性: 值;}

　　将页面中所有的标签都选中

1.2符合选择器

　　1.2.1标签指定式选择器

　　　　p.类选择器{属性: 值}

　　　　既...又(既是...又是标签)

　　1.2.2后代选择器

　　　　选择器   选择器{属性: 值}

　　//注意: 选择器和选择器之间有空格

　　　　标签之间的关系属于嵌套关系,

　　1.2.3并集选择器

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

　　　　是并列的关系

　　p,div{

　　color: red

　　}　　　　

注意: 标签之间不一定是并列关系! ! ! !

复习一下标签

　　　属性 　　　　　　　　赋值 　　描述
color Color:red 设置文字颜色
Font-size Font-size:20px 设置文字大小
Font-family Font-family:宋体 设置文字字体
Font-weight Font-weight: 数字/bold(700以上) normal 设置文字加粗
Font-style Font-style:italic/normal 设置文字斜体
background-color background-color:red 设置背景颜色
width/height width:12px 宽度和高度
Text-align Text-align:center 设置文字居中
align:(html的写法) align = @"center" 设置表格居中
Text-indent Text-indent:2em 设置首行缩进
Margin Margin:0auto 让盒子居中显示  

今天新的内容

2 Css书写位置介绍

2.1 内嵌式写法

2.2外联式写法(通过link标签)

html: 结构

css: 结构

　　<link　　rel = "stylesheet"　　href = "">

　　新建一个文件,后缀名以.css命名(css文件)

　　在html页面中通过

　　<link　　rel = "stylesheet"　　href = "">

标签将css文件引入

2.3行内式写法

　　通过给标签设置style属性来设置样式

　　最后一个样式后面可以加也可以不加";"

　　

还有没有其他的方法?

2.4Css书写方式之间的区别

内嵌式写法:

　　代码维护性比较差,没有实现css代码与html结构的完全分离

　　影响的范围只有当前页面

行内式写法: 　　

　　代码可以维护性极差,css代码和html结构没有实现分离(写后台的程序的可能会这样写)

　　影响的范围只有当前标签

外联式写法:

　　代码可维护性高,css与html结构完全分离

　　影响范围广,当前整个网页站点

3  HTML标签的分类

根据显示方式不同进行的分类

3.1块级元素(有宽度,有高度)

典型代表

　　div,p,li,h,l...

特点:

(1)  元素自己独占一行显示(与宽度无关)

(2)　可以设置宽度和高度

(3)　当嵌套一个块级元素,子元素如果不设置宽度,那么该子元素的宽度为父元素的宽度

　

3.2行内元素

　　典型代表

　　Span,a,font,strong

　　特点:

　　元素在一行上显示

　　行内元素不能直接设置宽度和高度

3.3行内块元素

典型代表: image,input(表单控件)

特点:

(1)元素在一行上显示

(2)可以设置宽度和高度

3.4元素之间的转换

　　Display:inline　　　　将元素转化为行内元素

　　Display: inline-block  将元素转化为行内块元素

　　DIsplay:block　　　　将元素转化为块元素

　　

4 Css特性

4.1层特性

　　样式的覆盖.样式的层叠性与样式的调用顺序没有关系,与样式的定义顺序有关

层叠性发生的前提: 样式冲突

4.2继承性

　　继承性发生的前提是标签之间属于一种嵌套关系

　　文字颜色可以实现继承

　　文字大小可以实现继承

　　字体可以实现继承

　　行高可以实现继承

总结: 与文字有关的属性都可以实现继承

　　特殊性:

　　<a href = "#"></a> 不能继承父元素中的文字颜色(层叠掉了)

　　<h1></h1>　　标题标签不能继承父元素中的文字大小

　　

4.3优先级

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式

< !important

0　　　　1　　　　10　　　　100　　　　1000　　　

　1000以上

4.3.1优先级的特点

　　继承的权重为0

4.3.2权重会叠加

5 伪类介绍

a:link{

属性: 值

}

　　超链接默认状态下的样式

　　a{

　　}与

　　a:link{

　　} 实现的效果是一样的

　　a:link{

　　属性: 值;

　　}

　　超链接访问过后的样式

　　a:visited{

　　属性:值;

　　}

　　鼠标放在超链接上的样式

　　a:hover{

　　}

　　超链接激活状态下的样式(点住不放的颜色)

　　a:active{

　　}

　　

　　获取焦点(光标)的时候的样式(跟表单控件配合使用)

　　a:focus{

　　}

注意: 以上几个属性必须按照此顺序来写,否则的话设置之后没有效果!

补充属性:(设置超链接下面的横线)

text-decoration

　　　　　　　　None: 不显示下横线

　　　　　　　　underline: 显示下横线

　　　　　　　　line-through: 贯穿线

6 背景(background)

6.1 Background-color

　　背景颜色

6.2 background-image(背景图片)

注意: 设置背景图片的时候一定要设置宽度和高度

6.3 background-repeat　　设置背景平铺

　　repeat (默认值)

　　no-repeat (不平铺)

　　repeat-x (横向平铺)

　　repeat-y (纵向平铺)

6.4background-position (设置背景位置)

　　设置具体指: left|right|top|bottom|cneter

设置居中:

设置具体值的时候不区分先后顺序

设置具体数字的时候,第一个值代表水平方向,第二个值代表垂直方向

6.5background-attachment (设置背景是否固定)

　　Scroll(默认值)滚动

　　fixed(图片固定)

背景属性联写:

　　没有数量限制和先后顺序限制

　　

去掉列表前面的显示方式

　　今天的学习结束了,别忘了好好练习和吸收!

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类的更多相关文章

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

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

  2. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

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

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

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

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

  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经典面试题144-数据存储

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

  9. 李洪强iOS经典面试题142-第三方框架及其管理

    李洪强iOS经典面试题142-第三方框架及其管理   第三方框架及其管理 使用过CocoaPods吗?它是什么?CocoaPods的原理? CocoaPod是一个第三方库的管理工具,用来管理项目中的第 ...

随机推荐

  1. 深入浅出RxJava就这一篇就够了

    前言: 第一次接触RxJava是在前不久,一个新Android项目的启动,在评估时选择了RxJava.RxJava是一个基于事件订阅的异步执行的一个类库.听起来有点复杂,其实是要你使用过一次,就会大概 ...

  2. golang错误处理机制:panic与recover

    原文地址:http://www.niu12.com/article/14 panic知识点 package main import ( "fmt" "github.com ...

  3. Anaconda安装Graphviz, mac下Graphviz安装, pcharm中调用pycharm, Graphviz典型例子

    mac下的Graphviz安装及使用 2017年10月13日 13:30:07 阅读数:7495 一.安装 Graphviz http://www.graphviz.org/ mac用户建议直接用ho ...

  4. java/eclipse/myeclipse建立.properties文件的方法

      相比较来说,Java程序的编写相对简单很多,多数文件都可以通过编写文本文件生成!     对于不用IDE的java程序来讲,只需要右键新建>文本文件,建立好以后写好代码,另存为xx.prop ...

  5. 3D游戏图形技术解析(7)——视差映射贴图（Parallax Mapping）【转】

    http://www.cnblogs.com/taotaobujue/articles/2781371.html 视差映射贴图(Parallax Mapping) ● 传统纹理贴图的弊端 纹理贴图大家 ...

  6. 关于RECOVERY清除数据的分析

    [前言] 讨论:双清和清空所有数据的问题 说明:以前写的帖子都写三清,那个是为了保险起见才叫大家三项清除,毕竟人都有刚开始的时候,但看了郭贤普的帖子<系统与数据兼容性测试>之后,我觉得有必 ...

  7. Python代码可视化

    把以下代码贴到这个网站: http://www.pythontutor.com l1 = [3, [66, 55, 44], (7, 8, 9)] l2 = list(l1) l1.append(10 ...

  8. Win7如何关闭 打开文件-安全警告

    如图所示,运行一个EXE程序就会弹出提示,很麻烦.   在运行对话框中输入gpedit.msc打开组策略编辑器.定位到用户配置--管理模板--windows组件--附件管理器 点中等危险文件类型抱含列 ...

  9. list/tuple/dict/set

    一.list(列表) 内置类型,长度可变的有序集合,索引从0开始,索引为负数是标识从右开始取,最右边第一个是-1,以此类推.里面的元素可以是不同类型的. 1.定义:a = [] #空列表 2.获取长度 ...

  10. PlayMaker 不支持过渡条件

    Unity Animator 自带也支持过渡条件,  我看了下PlayMaker没有这个概念.  最近研究下PlayMaker,图形化编程的确很爽. 但是PlayMaker 始于与给一些策划进行流程设 ...