css讲解

首先在我们学习css之前先来思考一个问题,为什么html标签上不直接改变样式,而要将文档结构和样式分离,分别用html和css来表示呢?

其实我个人认为这样分离带来的好处明显,我总结了几点:

1. 可以实现样式重用,提高了工作效率。

2. 可以更加细致的分工开发。

3. 使文件结构变的更加清晰。

1:css语法

CSS规则由两个主要的部分构成:选择器以及一条或多条声明,即:选择器{属性:值;属性:值;…. }

请注意:

将所有声明放到{ }中

每条声明由三部分组成——属性:值

声明以;结束

2:css常见属性

字符颜色

color:red;

字号大小

font-size:40px;

背景颜色

background-color:blue;

宽度

Width:10px;

长度

Height:40px;

背景图片

background-image:url(“1.png”);

文字居中

text-align:center;left|right;

行高

line-height

加粗

font-weight:bold;

不加粗

font-weight:normal;

斜体

font-style:italic;

不斜体

font-style:normal;

下划线

text-decoration:underline;

没有下划线

text-decoration:normal

首行缩进

Text-indent:2em;

在使用background-image属性时请注意:一定要设置其宽和高,例如:

width: 50px;

height: 90px;

background-image: url("x.jpg");

还有之前在html中标签设置背景图片使用:background,同时可以不用放在style中,而这里css是background-image;注意区分。

同时要知道:浏览器默认文字大小为16px,默认行高(line-height)为18px

3:css写法

在这里写3中常见的css写法:

(1)第一种:内嵌式写法

 1 <head>
2 <style type="text/css">
3 /*此处为CSS代码----在该写法中,可以将CSS样式写在<head></head>标签中*/
4 </style>
5 </head>

(2)第二种:外链式写法

与内嵌式写法中直接把CSS写在了<head></head>中不同,在外嵌式写法中是把CSS写在了专门的.css文件里,然后在html中通过<link>标签引用就可以了,请看如下示例:

 <head>
<link rel="stylesheet" type="text/css" href="csstest.css" /> /*在实际开发中,这种运用最多,因为可以降低后期的维护性成本*/
</head>

(3)第三种:行内式写法,这种写法作用范围相对小,但优先级最高,具体后面讲

 <body>
<p style="color:blue; font-size:40px">欢迎访问蜗牛的博客。</p>
</body>

CSS选择器

CSS常见选择器的分类:

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

并集选择器

后迭代选择器

交集选择器

 <!DOCTYPE html>
<html>
<head>
<style type="text/css"> p{
color: red;
background-color: pink;
}
.testclass{
color: red;
background-color: white;
} #testid{
color: red;
background-color:green;
} </style>
</head>
<body>
<p>我是标签选择器</p> <!--标签选择器只要把标签名放前面就好,也可以同时放多个-->
<h4 class="testclass">我是类选择器</h4> <!--类选择器签名前面加一点在取一个名字-->
<h4 id="testid">我是id选择器> <!--id选择器前面加#在取一个名字-->
<h4>我什么都不是</h4>
</body>
</html>

演示效果:

注意:

id选择与类选择器不同的是:一个标签只能调用一个ID选择器。虽然多个标签可以使用同一ID选择器,但是强烈不建议这么做,如果出现多个标签id相同的情况下,那么当你用js获得属性的时候,往往只能获得第一个。所以,在实际开发中极少采用ID选择器而多用类选择器。

通配符选择器:

通配符使用星号*表示,意思是“所有的”

*{
padding:0;
margin:0;
}

这里是设置所有元素的外边距margin和内边距padding都为0。

不过,由于*会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用*通配符选择器,取而代之的是,把所有需要统一设置的元素,放在一起,一块设置。

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;padding:0}

复合选择器

并集选择器:  <!--并集选择器有几个标签就对几个标签起作用,标签之间用逗号隔开-->

 <!DOCTYPE html>
<head>
<title>并集选择器</title>
</head>
<style type="text/css">
h4,span{
color:red;
}
</style>
<body>
<h4>我是h4标签</h4>
<span>我是span标签</span>
</body
</html>

运行结果如下:

后迭代选择器 :

特点:向后面迭代选择(向子标签)

 <!DOCTYPE html>
<html>
<head>
<title>后迭代选择器</title>
</head>
<style type="text/css">
.testdiv span{
color:green;
}
</style>
<body>
<div class="testdiv">
<p>我是p标签</p>
<span>子标签(孙子)</span> <!--表面该css只对class为testdiv中嵌套的span标签起作用-->
</div>
</body
></html>

运行结果如下:

交集选择器

交集选择器一般是以标签选择开头,类选择器结尾

 <!DOCTYPE html>
<html>
<head>
<title>交集选择器</title>
</head>
<style type="text/css">
div span.redspan{
color:red;
}
</style>
<body>
<div>
<span>span1</span><br>
<span class="redspan">sapn2</span><br> <!--只对这个有效果-->
<span>span3</span><br>
</div>
</body>
</html>

运行结果如下:

上面这些是一些有关基础css和选择器,接下来还有许多,我会一一道来!

css基础详解(1)的更多相关文章

  1. javaScript基础详解(1)

    javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...

  2. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  3. Dom探索之基础详解

    认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...

  4. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  5. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  6. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  7. Python学习一:序列基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...

  8. Python学习二:词典基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...

  9. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

随机推荐

  1. Firebug Console 与命令行全集

    Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调 ...

  2. ecos的app生命周期

    5种变迁,安装.更新.启动.暂停.卸载,每个app都可以自行维护每种变迁 方法简单,只需要在app/$app_name目录下定义task.php文件 <?php class desktop_ta ...

  3. STM32开发指南-跑马灯实验

    简单对I/O口的控制,主要通过对寄存器的读写控制.主要通过I/O的寄存器来控制:1. 控制I/O的方向2. 控制I/O的输出电平或上下来电阻3. 存储I/O口当前的输入状态(高低电平) 对使用LED灯 ...

  4. PHP 领域逻辑与数据库映射

    http://blog.csdn.net/hguisu/article/details/7569968

  5. 17.4.3 使用MulticastSocket实现多点广播(4)

    17.4.3  使用MulticastSocket实现多点广播(4) 通过UserInfo类的封装,所有客户端只需要维护该UserInfo类的列表,程序就可以实现广播.发送私聊信息等功能.本程序底层通 ...

  6. jquery.validate.js 一个jQuery验证格式控件

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  7. iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片

    1.改变高度 自定义UINavigationBar的新类别: //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation. ...

  8. 利用openURL,在IOS应用中打开另外一个应用

    在IOS中,实现一个应用启动另外一个应用,使用UIApplication的openURL:方法就可实现,这里以test跳到test02为例.(需要先创建这两个工程) 注册自定义URL协议(在test中 ...

  9. php管理关系工具Composer 之安装与下载

    参考网址:http://www.phpcomposer.com https://packagist.org 1.linux 安装Composer curl -sS https://getcompose ...

  10. UVa 11456 - Trainsorting

    题目大意:给一个车辆到达车站的序列(按时间先后),可以对车辆进行以下处理:插在队首.插在队尾或者拒绝进站.车站内的车辆必须按照重量大小从大到小排列,问车站内最多能有多少辆车辆? 假设车i是第一个进站, ...