李洪强和你一起学习前端之(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 ...
随机推荐
- rbac控制下无法创建poddisruptionbudgets
先通过下面命令找到具体的命名空间的rbac kubectl get role --all-namespaces kubectl get role aaa -o yaml 然后倒入到yaml文件中添加 ...
- 如何获取gcr等镜像
在cloud.docker.com上注册一个用户,然后登录 然后在github.com上注册一个用户 通过github Desktop建立一个repository,同时加入一个Dockerfile,然 ...
- asp.net Mvc Area 找到多个与名为相同的控制器匹配的类型 请通过调用含有“namespaces”参数
MVC中的Area的区域的时候,在一个Area中定义了一个Home控制器,在启动的时候, 找到多个与名为"Home"的控制器匹配的类型.如果为此请求("{controll ...
- iOS：quartz2D绘图（绘制渐变图形）
quartzD可以用来绘制渐变图形,即图形向外或向内发散,会变得越来越模糊. 渐变分为线性渐变和径向渐变,所谓线性渐变,就是图形以线的方式发散,发散后一般呈现出矩形的样子:而径向渐变,就是以半径的大小 ...
- linux CMakeLists.txt 语法
CMake入门教程 参考文献:http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/index.html 官方网址:http://www.cmak ...
- API Monitor---------------Using API Monitor to crack copy protected software
For this tutorial we will be using Mirial Softphone which is a HD video conferencing application. Th ...
- IOS APP 上传到AppStore
由于第一次接触要把 app 上传到 AppStore 比较棘手,很多地方不懂,研究了 大半天 终于给上传成功了,现在坐等审核吧,首先把上传到AppStore的流程 整理下 : 第一 :准备证书 (要确 ...
- c#跟objective-c语言特性的对比
拿c#语言跟objective-c做个对比,记录下自己认为是差不多的东西. 学过objc的人相信对category这个东西肯定不陌生,它可以让我们在没有源码的基础上对原先的类添加额外的一些方法,写到这 ...
- atitit.提升开发效率---使用server控件生命周期 asp.net 11个阶段 java jsf 的6个阶段比較
atitit.提升开发效率---使用server控件生命周期 asp.net 11个阶段 java jsf 的6个阶段比較 例如以下列举了server控件生命周期所要经历的11个阶段. (1)初始 ...
- PHP过滤器
这里介绍的过滤器包括: 1.filter_input 2.filter_input_array 3.filter_var 4.filter_var_array 5.filter_has_var 一.查 ...