李洪强和你一起学习前端之(3)Css基础和选择器
大家好!
经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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基础和选择器的更多相关文章
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 李洪强和你一起学习前端之(1)Html基础
1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试) Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- 李洪强和你一起学习前端之(8)CSS复习
今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义 ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
- 李洪强和你一起学习前端之(4)HTML5介绍
1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...
- 李洪强iOS开发之-环信03_集成 SDK 基础功能
李洪强iOS开发之-环信03_集成 SDK 基础功能 集成 SDK 基础功能 在您阅读此文档时,我们假定您已经具备了基础的 iOS 应用开发经验,并能够理解相关基础概念. SDK 同步/异步方法区分 ...
- 李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储 数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...
随机推荐
- 在linux中实现多网卡的绑定 介绍常见的7种Bond模式
网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是一种常用的技术,我们公司基本所有的项目相关服务器都做了bond,这里总结整理,以便待查. bond ...
- 在执行migrate的时候出现问题（错误见末尾）： django.db.utils.OperationalError: (1045, "Access denied for user ‘ODBC‘@‘localho st‘ (using password: YES)")
Python框架之Django的数据库 在执行migrate的时候出现问题(错误见末尾) django.db.utils.OperationalError: (1045, "Access d ...
- Spring MVC入门Demo
1 参考http://blog.csdn.net/haishu_zheng/article/details/51490299,用第二种方法创建一个名为springmvcdemo的Maven工程. 2 ...
- Junit核心——测试类（TestCase）、测试集（TestSuite）、测试运行器（TestRunner）
首先,把这三个定义简单的说明一下: 1.测试类(TestCase):一个包含一个或是多个测试的类,在Junit中就是指的是包含那些带有@Test注解的方法的类,同一样也被称作“测试用例”; 2.测试集 ...
- 15个CSS3和jQuery的超棒页面过渡效果教程
来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...
- Cocos2d-x设置吞没单击属性来避免精灵重叠被点击后的事件续传
代码如下: Size visibleSize = Director::getInstance()->getVisibleSize(); /* create two sprites which h ...
- 解决安装完Ubuntu系统后启动项中没有Ubuntu的问题
问题出现的原因是你没有把grub安装到硬盘的起始扇区里,按理说Ubuntu在安装的时候应该能很好的处理这个问题,但有个别电脑还是会出问题.不过我们可以通用命令解决 问题. 使用U盘进入Ubuntu系统 ...
- Spring Boot（一）启动方式
1.系统自动生成 SpringApplication.run(XX.class, args); 2.创建SpringApplication对象 SpringApplication app = new ...
- CXF 调用方式——动态创建客户端（调用稳定版本号为2.7.18）
今天用动态创建客户端的方式调用webservice,报了这样一个错: 2017-01-05 20:51:46,029 DEBUG main org.apache.cxf.common.logging. ...
- iOS开发一个制作Live Photo的工具
代码地址如下:http://www.demodashi.com/demo/13339.html 1.livePhoto简介 livePhoto是iOS 9.0 之后系统相机提供的拍摄动态照片的功能,但 ...