CSS再学

css的注释

/*.......*/

直接在html代码中写css

<p style="color: rebeccapurple;font-size: 18px">Hao</p>

css代码写在当前文件中

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

p{

color: red;

font-size: 19px;

        }

    </style>

</head>

<body>

<p>Hao</p>

</body>

css写在外部单独文件中

<link rel="stylesheet" href="base.css" type="text/css">这样导入

id选择器(#)

    <style type="text/css">

#set{

color: red;

font-size: 60px;

        }

    </style>

</head>

<body>

    <span id="set">选择</span>

</body>

</html>

class和id选择器的区别

相同点:可以应用于任何元素

不同点:

  1. ID选择器只能在文档中使用一次。
  2. 可以使用类选择器列表方法为一个元素同时设置多个样式

子选择器(>)

用于选择指定标签元素下的第一代子元素。

包含后代选择器

.first  span{color:red;},后代中所有的span标签都受影响

>:只影响第一代子元素

空格:所有后代都影响

通用选择器

* {color:red;}选定html中所有标签

伪类选择器

a:hover{color:red;}

一般用于a标签,使鼠标滑过变颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

a:hover{

color: red;

        }

    </style>

</head>

<body>

<a href="http://www.baidu.com">BaiDu</a>

</body>

</html>

放在BaiDu上,颜色变成红色。

分组选择符

h1,span{color:red;}相当于:

h1{color:red;} span{color:red;}

继承

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

p{color:red;}  <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:

p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/

层叠

我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

如下面代码:

p{color:red;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)

重要性

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

如下代码:

p{color:red!important;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意:!important要写在分号的前面

这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

css一些应用

body{font-family:"宋体";} 字体

body{font-size:12px;color:#666} 字号(大小),颜色

p span{font-weight:bold;} 粗体

p a{font-style:italic;} 斜体

p a{text-decoration:underline;} 下划线

.oldPrice{text-decoration:line-through;}  删除线

p{text-indent:2em;} 缩进

p{line-height:1.5em;} 行间距(行高)

h1{letter-spacing:50px;} 字间距

h1{     text-align:center; }

h1{     text-align:left; }

h1{     text-align:right; }

元素分类

块状元素:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

内联元素:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素:

<img>、<input>

块级元素

特点:

1.  每个块级元素都从新的一行开始,并且其后的元素也另起一行。

2.  元素的高度、宽度、行高以及顶和底边距离都可设置。

3.  元素宽度在不设置的情况下,是它本身父容器的100%,除非设置一个宽度。

设置display:block就是将元素显示为块级元素

内联元素

display:inline将元素设置为内联元素

特点:

1.  和其他元素都在一行上

2.  元素的高度、宽度及顶部和底边边距不可设置

3.  元素的宽度就是它包含的文字或图片的宽度,不可改变

内联元素

内联:同时具备内联元素、块状元素的特点,代码display:inline-block。只有<img>/<input>两个标签

特点:

1.  和其他元素都在一行上

2.  元素的高度、宽度、行高及上下边距都可设置

盒子模型

边框:

div{     border:2px  solid  red; }

相当于:

div{     border-width:2px;     border-style:solid;     border-color:red; }

1.  border-style(边框样式)常见的有:dashed(虚线)| dotted(点线)| solid(实线)

2.  border-width(边框宽度)

3.  border-top:1px solid red; 只设置上边框 4.  border-right:1px solid red;  只设置右边框 5.  border-left:1px solid red;  只设置左边框

6.  div{border-bottom:1px solid red;}  只设置下边框

高度和宽度:

css定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素的实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右边界+右边框+右边界

填充:

元素内容和边框之间可以设置距离的,称之为“填充”。padding

边界:

margin设置外边距

padding世内边距,margin是内边距

css布局模型

布局模型建立在盒子模型的基础之上。

css包含3种基本的布局模型:flow、layer、float

流动模型(flow):

流动(flow)是默认的网页布局模式。也就是说网页在,默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

有如下的特征:

1.  块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布,因为在默认情况下,块状元素的宽度都是100%,实际上,块级元素都会以行的形式占据位置。

2.  在流动模式下,内联元素都会在所处的包含元素内从左到右水平分布。

总结:html默认使用flow,流动,所有的内容都是应用在此之上。

浮动模型(float):

任何元素在默认情况下是不能浮动的,但可以使用CSS定义浮动,如div、p、table、img等元素都可以被定义为浮动。

层模型:

层模型有三种形式:

1.  绝对定位(position:absolute)

2.  相对定位(position:relative)

3.  固定定位(position:fixed)

绝对定位:

positon:absolute,这条语句的作用是将元素从文档中拖出来,然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位。如果不包含块,则相对于body元素,即相对于浏览器窗口。

div{     width:200px;     height:200px;     border:2px red solid;     position:absolute;     left:100px;     top:50px;} <div id="div1"></div>

相对定位:

positon:relative,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动。

#div1{     width:200px;     height:200px;     border:2px red solid;     position:relative;     left:100px;     top:50px; }  <div id="div1"></div>

<body>     <div id="div1"></div><span>偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置</span></bod<body>

总结:相对定位,就是虽然目标移动了,但是以前的位置还是留着。

固定定位:

position:fixed,与绝对定位(absolute)类似,但是它相对移动的坐标是视图(屏幕内的网页)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条而变化,因此它始终固定于窗口内视图的某个位置。导航条就是用这种固定方法。

Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:

1、参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->     <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。

2、参照定位的元素必须加入position:relative;

#box1{     width:200px;     height:200px;     position:relative;         }

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{     position:absolute;     top:20px;     left:30px;          }

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

 <!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>相对参照元素进行定位</title>

<style type="text/css">

div{border:2px red solid;}

#box1{

    width:200px;

    height:200px;

    position:relative;

}

#box2{

       position:absolute;

top:20px;

left:30px;

}

/*下面是任务部分*/

#box3{

    width:200px;

    height:200px;

    position:relative;      

}

#box4{

    width:99%;

       position:absolute; 

bottom:0;

}

</style>

</head>

<body>

<div id="box1">

<div id="box2">相对参照元素进行定位</div>

</div>

<h1>下面是任务部分</h1>

<div id="box3">

    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">

    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>

盒模型代码简写,css尽量较少代码量

1.  margin:10px 10px 10px 10px;

简写:margin:10px;

2.  margin:10px 20px 10px 20px;

简写:margin:10px 20px;

3.  margin:10px 20px 30px 20px;

简写:margin:10px 20px 30px;

4.  p{color:#000000;}

简写:p{color: #000;}

5.  p{color: #336699;}

简写:p{color: #369;}

6. 

body{     font-style:italic;     font-variant:small-caps;      font-weight:bold;      font-size:12px;      line-height:1.5em;      font-family:"宋体",sans-serif; }

简写:

body{     font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif; }

颜色值

1.  英文命令颜色

p{color:red;}

2.  RGB颜色

p{color:rgb(133,45,200);}

3.  十六进制颜色

p{color:#00ffff;}

长度值(px)

css样式设置小技巧

水平居中

html代码:

<body>   <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>

css代码:

<style>   .txtCenter{     text-align:center;   } </style>

水平居中定宽块状元素

html代码:

<body>   <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>

css代码:

<style> div{     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/          width:200px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */} </style>

水平居中总结

不定宽度的块状元素有三种方法居中:

1.  加入table标签

2.  设置display:inline方法:与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置

3.  设置position.relative和left:50%;利用相对定位的方式,将元素向左移50%,达到居中的效果。

html代码:

<div>  <table>   <tbody>     <tr><td>     <ul>         <li>我是第一行文本</li>         <li>我是第二行文本</li>         <li>我是第三行文本</li>     </ul>     </td></tr>   </tbody>  </table> </div>

css代码:

<style>table{    border:1px solid;     margin:0 auto; }</style>

第二种:

html代码:

<body> <div class="container">     <ul>         <li><a href="#">1</a></li>         <li><a href="#">2</a></li>         <li><a href="#">3</a></li>     </ul> </div> </body>

css代码:

<style> .container{     text-align:center;}/* margin:0;padding:0(消除文本与div边框之间的间隙)*/ .container ul{     list-style:none;     margin:0;     padding:0;     display:inline;}/* margin-right:8px(设置li文本之间的间隔)*/.container li{     margin-right:8px;     display:inline; } </style>

垂直居中,保持height和line-height高度一致,height是该元素高度,line-height行间距指在文本中行与行之间的基线间的距离。

如下代码:

<div class="container">     hi,imooc! </div>

css代码:

<style> .container{     height:100px;     line-height:100px;background:#999; } </style>

父元素高度确定的多行文本、图片等的竖直居中的方法有两种

(重要方法)方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:

html代码:

<body><table><tbody><tr><td class="wrap"><div>     <p>看我是否可以居中。</p> </div></td></tr></tbody></table></body>

css代码:

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

除了上面讲到的插入table标签,可以使父元素高度确定的多行文本垂直居中之外,本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差,只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html代码:

<div class="container">     <div>         <p>看我是否可以居中。</p>         <p>看我是否可以居中。</p>         <p>看我是否可以居中。</p>     </div> </div>

css代码:

<style> .container{     height:300px;     background:#ccc;    display:table-cell;/*IE8以上及Chrome、Firefox*/     vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>

隐性改变display类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

 1. position : absolute

 2. float : left 或 float:right

简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

如下面的代码,小伙伴们都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

<div class="container">     <a href="#" title="">进入课程请单击这里</a> </div>

css代码

<style> .container a{     position:absolute;width:200px;     background:#ccc; } </style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

10430
来自专栏恰童鞋骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

14730
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

310100
来自专栏Android小菜鸡

自定义View学习之路(二)————Paint与Canvas

  Canvas可以理解为画布,配置好画笔后,我们可以调用Canvas的各种绘制方法。   绘制直线:canvas.drawLine(float startX...

10410
来自专栏我和未来有约会

Blend基础-布局控件

布局 什么是布局? Panels控件(其实就是容器控件) 对内部的子控件提供了自动布局功能 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件...

24860
来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

20150
来自专栏进击的君君的前端之路

CSS常见样式(一)

31130
来自专栏Android干货

CSS基本知识(慕课网)

40360
来自专栏7号代码

Android应用界面开发——布局

线性布局可以控制各组件横向排列(通过设置属性android:orientation属性控制),也可控制各组件纵向排列。

22420
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

13140

扫码关注云+社区

领取腾讯云代金券