Web前端学习——CSS
一、CSS简介
CSS全称cascading style sheeding，层叠样式列表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS组成
1、选择器
（1）标签选择器
<head>
<style>
p{
background-color: green;
height: 48px;
}
</style>
</head>
<body>
<p>中国人</p>
</body>
（2）ID选择器
<head>
<style>
#i1{
background-color: blue;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">
中国人
</div>
</body>
（3）class选择器
<head>
<style>
.c1{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">
中国人
</div>
</body>
（4）关联选择器（层级选择器，空格）
类似span标签里的p标签的样式，也可以是id,class,标签等组合
<head>
<style>
span p{
background-color: darkorchid;
height: 48px;
}
</style>
</head>
<body>
<p>中国人</p>
<span>
<p>中国人</p>
</span>
<p>中国人</p>
</body>
（5）组合选择器(逗号)
<head>
<style>
.c1,.c2,.c3{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">
中国人
</div>
<div class="c2">
中国人
</div>
<div class="c3">
中国人
</div>
</body>
（6）属性选择器
对选择的标签过滤后再通过属性进行过滤
<head>
<style>
.cc[n="tom"]{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div class="cc">
中国人
</div>
<div class="cc" n="tom">
中国人
</div>
</body>
（7）行选择器
<body>
<div style=" height: 28px;">
中国人
</div>
</body>
2、link引入外部css
通过建立专属的css文件，在其他html导入css文件，从而使用css文件的样式
001.css内容如下：
#i1{
background-color: blue;
height: 48px;
}
.c1{
background-color: yellow;
height: 48px;
}
p{
background-color: green;
height: 48px;
}
span p{
background-color: darkorchid;
height: 48px;
}
.cc[n="tom"]{
background-color: yellow;
height: 48px;
}
001.html内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="001.css">
</head>
<body>
<p>中国人</p>
</body>
</html>
3、优先级
row style——>head style (按照编写顺序，自上而下优先)——> external style
4、css注释
/* 注释内容 */
5、背景、边框
样式、宽度、颜色、上下左右
<div style="border: 2px solid red ;width: 100px ;height: 20px">
中国人
</div> ##下面为边框属性
border-top-color: red;
border-top-style: solid;
border-top-width: 2px;
border-right-color: red;
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background可以定义如下属性：
background-color 规定要使用的背景颜色；
background-image 规定要使用的背景图像；
background-repeat 规定如何重复背景图像；
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动；
background-position 指定背景图像的位置；
<div style="background-image: url(001.jpg);border: 3px;height: 800px;">
chinese
</div>
6、float
漂移，挨着站齐
<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left">
中国人
</div>
<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left;">
中国人
</div>
7、display
块、行标签转换,inline、block、inline-block、none
行内标签：无法设置高度、宽度、padding、margin
块级标签：设置高度、宽度、padding、margin
<body>
<span style="display: block">123</span>
<div style="display: inline">456</div>
</body>
8、padding margin
9、position
固定位置,做层叠,其中主要有
fixed:固定在页面某个位置
relative+absolute:
top/bottom/left/right/
opacity:0-1透明度
z-index:层叠优先级，值越大越靠上
<body>
<div style="height: 30px;width: 100%;;background-color: blueviolet;position: fixed;top: 0">
菜单栏
</div>
<div onclick="gotop()" style="height: 30px;width: 80px;background-color: blueviolet;position: fixed;right: 0;bottom: 0">
返回顶部
</div>
<div style="height:5000px;background-color: blanchedalmond ;margin-top: 30px"> </div>
<script>
function gotop() {
document.body.scrollTop=0;
}
</script>
</body> 11、overflow
auto:超出，出现滚动条
hidden:超出部分隐藏
<body>
<div style="background-color: red ;width: 220px;height: 220px ;overflow: hidden">
<img src="001.jpg"> </div>
<div style="background-color: blue ;width: 220px;height: 220px ;overflow: auto">
<img src="001.jpg">
</div>
</body>
10、overflow
auto:超出，出现滚动条
hidden:超出部分隐藏
<body>
<div style="background-color: red ;width: 220px;height: 220px ;overflow: hidden">
<img src="001.jpg"> </div>
<div style="background-color: blue ;width: 220px;height: 220px ;overflow: auto">
<img src="001.jpg">
</div>
</body>
11、hover
鼠标移动到相应位置，显示其stype
12、其他常用style属性
width: 100px ; ##可以使用89%,边框宽度
height: 20px ; ##可以使用89%,边框高度
font-size:19px; ##字体大小
font-weight:bold ; ##加粗,80px,normal
font-family:'Microsoft YaHei'; ##字体样式,
color:red; ##字体颜色
text-align:center; ##水平方向字体对齐方式，center/left/right
line-height:48px; ##根据div,垂直方向字体居中
background-color:red ##背景色
text-decoration ##字体装饰
<a href="http://www.baidu.com" style="text-decoration: none">百度</a>
Web前端学习——CSS的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- 立方体旋转 【web前端学习部落22群120342833】
效果: HTML部分: <body class="body"> <div class="rect-wrap"> <!-- // ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- web前端学习就这9个阶段，你属于哪个阶段？
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- （纯干货）最新WEB前端学习路线汇总初学者必看
Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...
随机推荐
- Unity3D手机斗地主游戏开发实战（02）_叫地主功能实现(不定期更新中~~~)
目录 Unity3D手机斗地主游戏开发实战(01)_发牌功能实现 Unity3D手机斗地主游戏开发实战(02)_叫地主功能实现 一.大体思路 前面我们实现了点击开始游戏按钮,系统依次给玩家发牌的逻辑和 ...
- [C#]使用ILMerge将源DLL合并到目标EXE(.NET4.6.2)
本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 本文主要是使用微软的ILMerge工具将源DLL合并到目标EXE,因此,需要下载以下工具: https://www.micro ...
- poj 3662 Telephone Lines
Telephone Lines Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7115 Accepted: 2603 D ...
- A - 棋盘问题 POJ - 1321
在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放方案C. ...
- VMware三种网络模式
VMware网络配置详解一:三种网络模式简介安装好虚拟机以后,在网络连接里面可以看到多了两块网卡: 其中VMnet1是虚拟机Host-only模式的网络接口,VMnet8是NAT模式的网络接口,这些后 ...
- [DeeplearningAI笔记]ML strategy_2_3迁移学习/多任务学习
机器学习策略-多任务学习 Learninig from multiple tasks 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.7 迁移学习 Transfer Learninig 神 ...
- 1.Introduction 介绍
Welcome to Log4j 2! Introduction Almost every large application includes its own logging or tracing ...
- SQL查询多条不重复记录值简要解析【转载】
转载http://hi.baidu.com/my_favourate/item/3716b0cbe125f312505058eb SQL查询多条不重复记录值简要解析2008-02-28 11:36 以 ...
- 机器翻译评测——BLEU改进后的NIST算法
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/7765345.html 上一节介绍了BLEU算的缺陷.NIS ...
- 一、VueJs 填坑日记之基础概念知识解释
概述在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs.对于初学者(尤其是干后端的初学者)来说,刚 ...