李洪强和你一起学习前端之(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 ...
随机推荐
- windows 配置环境变量快捷方式
在 Windows 设置环境变量 在环境变量中添加软件A的目录: 在命令提示框中(cmd) : 输入 path %path%;C:\A, 按下"Enter". 注意: C:\A是软 ...
- windows环境phpstorm调试环境搭建
一:安装设置xdebug 这个一般有两个步骤1:浏览器的xdebug插件安装,一般用firefox的插件,chrome好像不太好使,chrome安装后的 效果 安装后如下图所示,需要配置IDEKEY ...
- reconstruct-original-digits-from-english(好)
https://leetcode.com/problems/reconstruct-original-digits-from-english/ //https://discuss.leetcode.c ...
- LINUX下渗透提权之嗅探技术
内网渗透在攻击层面,其实更趋向于社工和常规漏洞检测的结合,为了了解网内防护措施的设置是通过一步步的刺探和经验积累,有时判断出错,也能进入误 区.但是如果能在网内进行嗅探,则能事半功倍,处于一个对网内设 ...
- java源码阅读Observable(观察者模式)
1类签名和简介 package java.util; public class Observable Observable是Java内置的观察者模式中的主题类(没错,是类不是接口),和其对应的观察者接 ...
- 【Other】ASCII Text Art
http://fsymbols.com/cn/wenzi-yishu/ http://fsymbols.com/text-art/#all_cats http://chris.com/ascii/in ...
- GDALDataset的创建和销毁
之前在GDALDestroyDriverManager 分析中没有看到对dGDALDatasert的回收.先看一个例子程序,这个例子打开了一个tif文件,读取了一些基本信息. 为了简单示范,没有写成C ...
- json字符串跟objective-c模型的相互转换
在当今这样一个各种openapi开放的年代,在熟悉的语言下面找到一款得心应手的将json字符串转换成模型的库可以说是十分必要的,在NET平台下,我们有Newtonsoft.Json这个库使用,那么在i ...
- PHP图像操作:3D图、缩放、旋转、裁剪、加入水印(一)
来源:http://www.ido321.com/875.html 1.利用php gd库的函数绘制3D扇形统计图 1: <?php 2: header("content-type&q ...
- /dev/null 的含义和用途
/dev/null 代表空设备文件,它等价于一个仅仅写文件,全部写入它的内容都会永远丢失.而尝试从它那儿读取内容则什么也读不到. 0:表示键盘输入(stdin) 1:表示标准输出(stdout),系统 ...