css之入门篇

今日学习终于到了css，css可以实现很多表现出很酷的界面，而css的出现是为了解决

HTML结构上写样式出现一片混乱现象而应运而生的语言，在以前样式都是和结构一起写的，

不分彼此，而这样大大增加了代码量，因为一个同样的样式不断重复，只能不断重新写出

来，还有也让代码写完后困难阅读，查找错误也变得无比艰辛，而这个时候css出现了，并

体现出了它的好处，而它的好处就是把上面的问题解决了，把结构与表现分离开来。

接下说说什么是css?

什么是CSS？

CSS (Cascading Style Sheets) 层叠样式表

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。

目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了

，IE10以后也开始全面支持CSS3了。不同的浏览器可能需要不同的前缀。它表示该CSS属性

或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需

要前缀的，但为了更好的向前兼容前缀还是少不了的。

css就是为了装饰HTML的结构而出现的，它能做到以前的HTML无法做到的事，它能把HTML装扮的

很美观，所以css是HTML的补充。

如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    p{

        color: #ff00ff;

        font-size: 16px;

        font-weight: bold;

    }

    </style>

</head>

<body>

<p>wowaoda</p>

</body>

</html>

css把p标签修饰成字体是粉红色，粗体，字体大小为16像素，从这可以看出css可以为HTML里的元素补充样式，即修饰它，打扮它。

那么css究竟可以干嘛呢？

CSS能做什么？？？？

CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。

比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

CSS简化了前端开发工作人员的设计过程，更灵活的页面布局，更快的页面加载速度。

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，

那么整个站点的所有页面都会随之发生变动。 CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。

目的：将表现与结构分离。

例子：

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    div{

        width: 100px;

        height: 100px;

        border-radius: 50%;

        background: rgba(200,150,200,0.3);

        box-shadow: 2px 2px 2px 3px #eee;

    }

    </style>

</head>

<body>

<div></div>

</body>

</html>

这个完全是靠css实现，它使页面美化。

还有请点击这个：动画的css

那么前面写着这些，让我对其强大感到好奇，那接下来，让我们探探它的语言。

CSS语法结构？

CSS 语法由三部分构成：选择符、属性和值

属性是您希望设置的样式属性。

每个属性有一个值。属性和值被冒号分开。

p{

    font-size:15px;

    }

p是选择符，属性是font-size，值为15px；

a{

    color:#000;

    }

这个也是一样理解，是不是很类似，它的结构很简单，就这三个部分。

那么css的就够都懂了，那么怎么实现这些css呢？那就要说说引用到页面了。

如何引入CSS？

三种引入方式：

1.行内引用行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。

注意这种方式的引入CSS，是不需要写选择器的。

<p style="color:#ff7600;">我是段落</p>

2. 页内引用

页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    p{

        color: #ff7600;

    }

    </style>

</head>

3.外部样式表

外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <link rel="stylesheet" href="style.css">

</head>

这些就是它的引用方式，只要引用进来才能作用到HTML结构上。

既然有这几种引用方式，那么是不是随意引用的呢？如果这样那么就是乱套了，因为css也叫层叠样式表，既然

随便引用那么不是和它的理念冲突了吗？所以这些引用还是规则的，就是优先级；

优先级依次是：就近原则

行内引用 > 页内引用 > 页外引用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<div></div>

<p style="color:#ff7600;">我是段落</p>

</body>

</html>

它会优先执行行内样式，所以在外部样式中含有相同样式时，它是给忽略掉的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    p{

        color: #fff;

    }

    </style>

</head>

<body>

<div></div>

<p style="color:#ff7600;">我是段落</p>

</body>

</html>

从规则中知道这个也一样，内部样式也是被忽略的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    p{

        color: #fff;

    }

    </style>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<div></div>

<p>我是段落</p>

</body>

</html>

根据规则，内部样式优先。

既然样式都会写，那么自己写了很多很多样式代码，然后想找出某处的样式怎么办？一个一个样式看一遍，这个岂不是很耗时，很费神，

既然自己都这样了，那这个代码到了队友那不就是个坑。所以我们是不是可以注释一下他呢，让代码可读性更加强。

CSS注释

/*这是头部*/

header{

    color:#fff;

}

/*这是导航*/

nav{}

/*这是主体*/

.container{}

/*这是尾部*/

footer{}

这样是不是可读更强呢。

在HTML中结构可以很复杂，那么我们不可能简单的写个元素选择符吧。

而各种各样方便的选择符，从HTML结构树应运而生。

选择符

1、通配选择符*

这个是选中全部元素，为他们设置样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    *{

        font-size: 15px;

    }

    </style>

</head>

<body>

<h1>标题</h1>

<p>我的段落的兄弟</p>

<p>我是段落</p>

</body>

</html>

它们的字体都被设置为15像素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    *{

        font-size: 15px;

        font-weight: bold;

    }

    </style>

</head>

<body>

<h1>标题</h1>

<p>我的段落的兄弟</p>

<p>我是段落</p>

</body>

</html>

它们都被加粗了。

2、元素选择符

所谓元素选择符，指以网页中已有的标签名作为名称的选择符。

body {}

h1 {}

p {}

3、群组选择符

除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。

p,h1{

        font-size: 15px;

        font-weight: bold;

    }

4、关系选择符

选择所有被E元素包含的F元素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <style>

    p span{

        color: #eee;

    }

    </style>

</head>

<body>

<p>

    <span>我是谁？</span>

</p>

</body>

</html>

今日课程知识到此！！！

css.doyoe.com css参考手册

接下来扩展补充：

特殊性：

每个选择器都有特殊性，而如果一个元素有两个或多个冲突的属性声明，特殊性高的胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0.

一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加0,1,0,0。

对于选择器中给定的各个类属性值、属性选择或伪类，0,0,1，0。

对于选择器中给定的各个元素和伪元素，0,0,0,1。

结合符和通配选择器对特殊性没有任何贡献。

而通配选择器 0,0,0,0.

结合符连零都没有。

例子：

h1{color:red;} 为0,0,0,1

p em{color：purple} 为0,0,0,2

.grape{color:purple} 为0,0,1,0

p.b e.a{color:red; } 0,0,2,2

#aa{color:red;} 0,1,0,0

div#aa *[href]{color:red;} 0,1,1,1

而第一个0是为行内样式准备的，因为越前面，代表优先级越高，假如非零数字位置一样，那么先比较前面的数字的大小，

然后再往下比较，直到数字不相对，取数字大那个的优先级高。

重要声明 !important ,就是把你所需要的声明标出来，它的优先级最高，不过它要放在声明的值的最后。

继承：

继承的特殊性连零都没有，就是没有特殊性；

这个0特殊性有零与无特殊性有很大的区别，就是0特殊性的选择器可以为后代加样式，

而继承虽然也有给后代加样式，但有限制的，只有有继承能力的才能加到后代元素中，如color等，而margin、padding和border这些属性都不会加到后代里。

相同权重的，按顺序比较，顺序越下他的优先级最高。

较高特殊性强于较低特殊性

所以伪类声明顺序：link-visited-hover-active

LVHA（简写）

当:visited在他们之后时，由于权重一样，所以会看他们的顺序，而:visited在他们之后会胜出。

当不是写统一属性就不会出现这种问题。所以写同一种属性时要注意！！！！

css之入门篇的更多相关文章

1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
web前端开发分享-css,js入门篇（转）
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
web前端开发分享-css,js入门篇
学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...
【three.js详解之一】入门篇
[three.js详解之一]入门篇开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...
jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
JavaScript入门篇编程练习
编程挑战一.定义"改变颜色"的函数提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数提 ...
慕课网JavaScript入门篇课程笔记
1.js注释很重要单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
PHP学习笔记--入门篇
PHP学习笔记--入门篇一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...
css,js工具篇
4. web前端开发分享-css,js工具篇 web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...

随机推荐

GIS开发环境全面升级10.1
最近,因为公司开发的需要,对开发环境进行全面的升级,在这其中也遇到了不少问题,在之后将陆续整理出来,以便以后查看. 之前开发环境:VS2008,ArcGIS9.3,ArcEngine9.3,Oracl ...
sql server 2000通过机器名可以连，通过ip连不上的问题
客户那边两台服务器A和B,之前一直都是好好的,今天因为换了网络环境,结果数据库之间不能相互访问了. 目前只能A访问B,B访问不了A,在服务器A上面试了,通过ip连本机,也是连接超时. 开始想着是服务器 ...
[Python] 关于64位机的numpy安装问题
最近刚换成64位的系统,重新安装了win10,VS也从原来的2010变为了现在的2013. 利用原来32位电脑硬盘里的python2.7安装包安装,然后打算安装numpy. 上来碰到问题:在windo ...
DL4J (DeepLearning for java)
http://deeplearning4j.org/lstm.html A Beginner’s Guide to Recurrent Networks and LSTMs Contents Feed ...
mysql and 和 or 的优先级和查询问题
1. select * from trade where id=1 and cid=1 or pid=2 ; 2. select * from trade where cid=1 or (pid=2 ...
css样式注意
CSS3 font-face定义的字体使用时有时候用引号,有时候不用,很奇怪,如 @font-face{ font-family: Roboto-Black; src: url('../package ...
noip2014-day1-t2
题目描述:无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...
[UE4]武器碰撞
实现武器战斗伤害系统,击中时如何发出碰撞事件产生伤害,目前探索的有通过物理碰撞和LineTrace两种方法. 物理碰撞通过Overlap事件的方法,优点是易于实现,缺点是无法具体到碰撞骨骼位置,低帧数 ...
Spring MVC静态资源处理(在applicationContex.xml文件中进行配置)
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...
125 Valid Palindrome
public class Solution { public boolean isPalindrome(String s) { if(s==null) return false; s=s.toLowe ...

css之入门篇

css之入门篇的更多相关文章

随机推荐

热门专题