本篇主要介绍css的常用样式,以及网页布局相关知识、绝对定位和相对定位,盒子模型、css权重、以及css选择器;

绪论:CSS基本介绍

  为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

  例如你看到有样式的搜索框可能是这样的:

  

  而没有样式的可能是这样的:

    

  故我们需要知道的是(网页三剑客--HTML、css、JavaScript):

    html主要负责网页的结构和内容,css用来负责表现,让网页更加漂亮,而后面要讲的JavaScript主要用来做动画和交互效果。

一、CSS载入方式

 css引入页面的方式有三种:

  1、内联式:通过标签的style属性,在标签上直接写样式。

<div style="width:100px; height:100px; background:red ">内联式</div>

  2、嵌入式:通过style标签,在网页上创建嵌入的样式表。

<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>

  3、外链式:通过link标签,链接外部样式文件到页面中。(推荐)

<link rel="stylesheet" type="text/css" href="css/main.css">

  

二、CSS选择器

 首先,什么是选择器呢?我们要给HTML标签添加样式,那么在嵌入式和外链式中我们怎么找到该标签呢?便是通过选择器,大致有以下几种:

  1、标签选择器

  标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中。

div{color:red}
......
<div>这是第一个div</div> <!-- 对应以上样式 -->
<div>这是第二个div</div> <!-- 对应以上样式 -->

  2、类选择器

  通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。

.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>

  3、层级选择器

  主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围。

.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>

  4、id选择器

  通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

#box{color:red}
......
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->

  5、组选择器

  多个选择器,如果有同样的样式设置,可以使用组选择器。 举例:

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold} <div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

  6、伪类选择器

  常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。

<style type="text/css">
.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
</style>

三、浮动

  float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为:

   左浮动:float:left;   右浮动:float:right;

  注:通常在实际的布局中,用到最多还是浮动,而不是定位,尽管定位实现起来更加不容易出错,但是确十分的麻烦--因为你需要获得知道每个块相对于父级块的位置,故我们做布局通常用浮动;这里总结一下:

  当块元素需要在同行显示时,我们考虑用浮动;而每个同行的块元素尽量给一个相同的父级,便于控制;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
width: 1200px;
height: 500px;
/*background-color: #666;*/
margin: 20px auto;
}
.leftbox{
width: 900px;
height: 500px;
/*background-color: yellow;*/
float: left;
}
.rightbox{
width: 280px;
height: 500px;
background: lightblue;
float: right;
} .box1,.box2{
width: 900px;
height: 240px;
background: yellow;
}
.box2{
margin-top: 20px;
} </style>
</head>
<body>
<div class="box">
<div class="leftbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="rightbox"></div>
</div>
</body>
</html>

浮动

四、定位  

  文档流 
 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。

  关于定位 
 我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:

   relative -- 生成相对定位元素,一般是将父级设置相对定位,子级设置绝对定位,子级就以父级作为参照来定位,否则子级相对于body来定位。

  absolute -- 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。  

  fixed--生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

  定位元素的偏移 
 定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

  定位元素层级 
 定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
.bigbox{
width: 400px;
height: 400px;
background: yellow;
position: relative;
}
.box1{
width: 200px;
height: 200px;
background: green;
float: left;
position: absolute;
left: 400px;
top: 400px;
z-index: 10; }
.box2{
width: 200px;
height: 1000px;
background: blue;
float: left;
position: absolute;
left: 600px;
top: 600px;
z-index: 11;
opacity: 0.7;
}
.box3{
width: 100px;
height: 100px;
background: red;
position: fixed;
right: 10px;
top: 300px;
}
</style>
</head>
<body> <div class="bigbox">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div> </body>
</html>

定位

五、CSS显示特性-display

 display属性是用来设置元素的类型及隐藏的,常用的属性有:
  1、none 元素隐藏且不占位置
  2、inline 元素以行内元素显示
  3、block 元素以块元素显示

六、CSS元素溢出  

  当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

overflow的设置项:

  1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
  2、hidden 内容会被修剪,并且其余内容是不可见的。
  3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

  通常用于动画效果。

七、CSS权重

  CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

 权重的等级:

 可以把样式的应用方式分为几个等级,按照等级来计算权重
  1、内联样式,如:style=””,权重值为1000
  2、ID选择器,如:#content,权重值为100
  3、类,伪类,如:.content、:hover 权重值为10
  4、标签选择器,如:div、p 权重值为1

<style type="text/css">

    body #content .main_content h2{
color:red;
} #content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
<!--
第一条样式的权重计算: 1+100+10+1,结果为112;
第二条样式的权重计算: 100+10+1,结果为111;
h2标题的最终颜色为red
-->

  over~~~关于css样式就介绍这些可能用得着的,关于样式属性可以参考W3School手册  ---   http://www.w3school.com.cn/

02-CSS常用样式的更多相关文章

  1. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  2. CSS常用样式(四)之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  3. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  4. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  5. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  6. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  7. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  8. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  9. css 常用样式命名规则

    大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap  ——用于最外层 头部:header  ——用于头部 主要内容:mai ...

  10. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

随机推荐

  1. IfcEdge

    /* Generated By: IFC Tools Project EXPRESS TO JAVA COMPILER: Do not edit this file!! */ package ifc2 ...

  2. VC++6.0 打印调试信息

    1.在MFC中加入TRACE语句 2.在TOOLS->MFC TRACER中选择 “ENABLE TRACING”点击OK 3.进行调试运行,GO(F5)(特别注意:不是执行‘!’以前之所以不能 ...

  3. 微信多开简单实现 WeXinMoreOpen.bat

    新建一个 WeXinMoreOpen.bat 文件,内容如下 @echo off D: cd "D:\Program Files (x86)\Tencent\WeChat" sta ...

  4. thinkphp5 模板url标签 跟javascript ajax 的 url 参数 被莫名替换

    发现一个  thinkphp5 的小bug 我用的是 thinkphp5.0.24 版本 在模板标签里 原来的大U函数  被改成url 那么问题来了   在javascript里  这样写  标签很容 ...

  5. me.chanjar.weixin.common.error.WxErrorException: {"errcode":40013,"errmsg":"invalid appid hint: [xxxxxxxxxx]"}

    错误解决思路: 1.看看appid和appsecret的配置信息是否正确 2.查看前后端通信的http或者https协议是否正确( http://xxxxxxx 写成https://xxxxxxx)

  6. Visual Studio 2019激活

    Visual Studio 2019 Enterprise BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Professional NYWVH-HT ...

  7. [cf 1194 D] 1-2-K Game

    (当时让这道sb题卡住了,我比sb还sb) 题意: n个东西,两个人轮流取,每次可以取走1个,2个或k个,不能取的人输,求谁必胜. $0\leq n \leq 10^{9},3\leq k \leq ...

  8. Hive 系列(二)—— Linux 环境下 Hive 的安装部署

    一.安装Hive 1.1 下载并解压 下载所需版本的 Hive,这里我下载版本为 cdh5.15.2.下载地址:http://archive.cloudera.com/cdh5/cdh/5/ # 下载 ...

  9. .net core webapi通过中间件获取请求和响应内容

    本文主要根据中间件来实现对.net core webapi中产生的请求和响应数据进行获取并存入日志文件中: 这里不详细介绍日志文件的使用.你可以自己接入NLog,log4net,Exceptionle ...

  10. C# vb .net实现裁剪效果特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的裁剪效果效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...