大家好!
经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有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日 于 北京