Web前端学习—

一、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前端开发工程师可谓是高福利.高薪水的 ...

随机推荐

JavaScript+HTML5 实现打地鼠小游戏
一．游戏简介打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaS ...
Uncle Tom's Inherited Land*
Uncle Tom's Inherited Land* Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
python抓去网页一部分
import sys, urllib2 headers = {'User-Agent':'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9. ...
针对数据量较大的表，需要进行跨库复制，采用navcat 实现sqlite数据库跨数据库的数据表迁移 [转载]
2014年12月13日 14:36 新浪博客 (转自http://www.cnblogs.com/nmj1986/archive/2012/09/17/2688827.html) 需求: 有两个不同的 ...
progress 相关事件异步 ajax
loadstart — Fires when the ﬁ rst byte of the response has been received.progress — Fires repeatedly ...
vue 响应式原理
Vue 采用声明式编程替代过去的类 Jquery 的命令式编程,并且能够侦测数据的变化,更新视图.这使得我们可以只关注数据本身,而不用手动处理数据到视图的渲染,避免了繁琐的 DOM 操作,提高了开发效 ...
【机器学习实战】第13章利用 PCA 来简化数据
第13章利用 PCA 来简化数据降维技术场景我们正通过电视观看体育比赛,在电视的显示器上有一个球. 显示器大概包含了100万像素点,而球则可能是由较少的像素点组成,例如说一千个像素点. 人们实 ...
Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0,"解决办法
这是因为先安装了 .NET Framework 4,随后启用了 .NET Framework 3.5 WCF HTTP 激活,则会发生此错误. 只需要已管理员用户在cmd中运行aspnet_regii ...
我眼中的WebViewJavascriptBridge
周六阳光明媚的早晨,非常适合整理和分享一些以前玩过的东西.曾经的工作中参与过一段时间iOS开发,在开发中有个小小的框架让我非常深刻,就是WebViewJavascriptBridge,用于原生控件与前 ...
发放福利：原价135元/年的阿里云CDN流量包（500GB）免费送
不少朋友看过本站推荐的两篇文章:1. <阿里云全民云计算活动:云服务器ECS二折起>2. <阿里云双11优惠活动-爆款云服务器> 大部分人都说不错,很快下单购买了服务器,后续使 ...

Web前端学习——CSS

Web前端学习——CSS的更多相关文章

随机推荐

热门专题