HTML5教程

WEB前端开发--3(CSS样式)

本文主要是介绍WEB前端开发--3(CSS样式),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

WEB 前端开发--3(CSS样式)


1. CSS概述

HTML:网页的内容     CSS:内容的样式

CSS:Cascading Style Sheets  层叠样式表

内容和样式分离,易于修改样式

1.1 CSS语法

选择器中的行语句以分号结束

选择器:p{}        注释:  /*注释*/

p{

  font-size:12px;     /* 字号*/

  color:blue;     /*颜色*/

  font-weight:bold;     /*加粗*?

}

 

1.1.1 CSS 添加方法——行内

<p style="color:red">

天使投资指早期投资,尤其指个人早期投资

</p>

1.1.2 CSS添加方法——内嵌

写在head标签内,对当前页面的所有p标签有效

<head>

<style type="text/css">

 p{

   color:red;

    }

</style>

</head>

1.1.3 CSS添加方法——单独文件

外部样式表文件 

style.css

p{

   color:red;     /*设置文字颜色*/

}

 

h1{

  color:blue;

}

 

1.htm

<!DOCTYPE html>

<html>

<head>

 <link rel="stylesheet" href="css/style.css">      link:css 自动扩展

</head>

<body>

  <p>内容</p>

</body>

</html>

 

单独文件优点:

    页面结构HTML代码与样式CSS代码完全分离

    维护方便

    如果需要改变网站风格,只需要修改公共CSS文件

    可以在同一个HTML文档内部引用多个外部样式表、

1.1.4 CSS添加方法——优先级

1. 多重样式可以重叠,可以覆盖

2.样式的优先级按照就近原则

3.行内样式>内嵌样式>连接样式>浏览器默认样式


2.CSS 选择器

2.1 标签选择器

CSS文件:

<style type="text/css">

  body{

    bacground-color:#ccc;

    text-align:center;

    font-size:12px;}

  h1{font:"黑体"; font-size:20px;}

  p {color:red; font-size:16px}

  hr {width:200px} 

  }

</style>

 

HTML文件:

<body>

  <h1> 标题 </h1>

  <hr>

  <p>正文的段落</p>

  版权所有

<body>

 

2.2 class类别选择器

点开头       px:pixel  像素

CSS文件:

<style type="text/css">

   p      {font-size:12px;}

  .one{font-size:18px;}

  .two{font-size:24px;}

</style>

 

HTML文件:

<body>

    <p class="one"> 类别1</p>

    <p class="one"> 类别1</p>

    <p class="two"> 类别2</p>

    <p class="two"> 类别2</p>

    <p> 普通段落中的文字</p>

</body>

 

2.3 ID选择器

CSS文件:

<style type="text/css">

    #one{font-size:12px;}

    #two{font-size:24px;}

</style>

 

HTML文件:

<body>

    <p id="one"> 文字1 </p>

    <p id="two"> 文字2 </p>

</body>

 

2.4 嵌套声明:

空格隔开表示嵌套,内部也需要嵌套使用

CSS文件:

 

<style type="text/css">

    p span{

      color:red;

    }

</style>

 

HTML文件:

<body>

 <p><span>天使投资</span>是投资方式的一种</p>

</body>

2.5 集体声明

逗号隔开,表示采用同一种样式

CSS文件:

<style type="text/css">

    h1,p {text-align:center; }

</style>

 

HTML文件:

<body>

    <h1>欢迎访问论坛</h1>

 <p>欢迎访问论坛</p>

</body>

2.6 全局声明

*  开头,针对所有的网页元素

<style type="text/css">

    *  {text-align:center; }

</style>

2.7 关于混合使用

多个class选择器混用,用空格分开

<div class="one yellow left"> ... </div>

 

id和class选择器混用:

<div id="my" class="onr yellow my">...</div>

 

id选择器只能被引用一次,所以不要多次使用也不要同时使用


 

3. CSS样式

3.1 文本字体类型样式

常用单位:

px——像素   

em——1em:一个字符    2em:两个字符  自适应用户所使用的字体

%——百分比    相对于父层的样式*m% 得到子层数据

 

颜色:

rgb(x,x,x)   取值:0~255

rgb(x%,x%,x%)    取值:0%~100%

rgba(x,x,x,x)  a取值:0~1  0为完全透明   1 为完全不透明

#rrggbb     十六进制数 :红色#ff0000   

 

文本:

color——文本颜色——上文已述

letter-spacing——字符间距——2px   -3px

line-height——行高——14px   1.5em   120%

text-align——对齐——center   left   right   justify(两端对齐)

text-decoration——装饰线——none  overline  underline  line-through

text-indent——首行缩进——2em 

 

字体:

font——在一个声明中所有字体属性——font:bold  18px  ’幼圆‘

font-family——字体系列——font-family:"Hiragino Sans GB"   "Microsoft YaHei"   "sans-serif" 

(给了多个字体,则从前往后搜索,直到搜索到有的作为默认字体) 

font-size——字号——14px   120%

font-style——斜体——italic

font-weight——粗体——bold

 

简化font写法:

font:斜体    粗体   字号/行高    字体;

font:italic    bold    16px/1.5em    '宋体';

 

3.2 CSS 背景样式

背景属性:空元素需要先定义元素的高度和宽度 height、width

backgroud-color:颜色

backgroud-image:  url("logo.jpg")    背景图片

background-repeat:repeat          水平垂直重复填充                       

          repeat-x  只填充横向一行

          repeat-y  只填充纵向一列

          no-repeat     只显示一次

简化background写法:

background:颜色    图片     repeat

例子:

div{

  height:30px;

  width:60px;

  background: url("images/bgi.gif")  repeat-x

}

3.3 CSS超链接样式

:   ——  伪类选择器

链接的四种状态:

  a:link——普通的、未被访问过的链接

  a:visited——用户已访问的链接

  a:hover——鼠标指针位于链接的上方悬停

  a:active——链接被点击的时刻

顺序:

  a:hover 必须在a:link和a:visited之后

  a:active 必须在a:hover之后

口诀:LOVE & HATE

L——link   V——visited   H——hover  A——active

举例:

a:link{

  text-decoration:none;

  color:#09f;   /* 未访问*/

}

a:visited{

  text-decoration:none;

  color:#930;   /*已访问*/ 

}

a:hover{

  text-decoration:underline;

  color:#03c;   /*鼠标悬停*/

}
a:active{

  text-decoration:underline;

  color:#03c;  /*按下鼠标*/

}

## 超链接动态效果设定,即鼠标悬停放大字体:

CSS文件:

a{

  font-size:22px;

}

a:hover{

  font-size:120%  /*鼠标悬停变为1.2倍大小*/

}

HTML文件:

<a href="#"> websign </a>

3.4 CSS列表与表格样式

无序列表ul和有序列表ol共用样式:

list-style——所有用于列表的属性设置于一个声明中

list-style-image——为列表项标志设置图像

list-style-position——标志的位置

list-style-type——标志的类型

 

list-style-type具体取值:

无序列表:

none——无标记

disc——默认。标记是实心圆。

circle——标记是空心圆

square——标记是实心方块

有序列表:

decimal——标记是数字

lower-roman——小写罗马数字

upper-roman——大写罗马数字

lower-alpha——小写英文字母

upper-alpha——大写英文字母

lower-Greek——小写希腊字母

lower-latin——小写拉丁字母

upper-latin——大写拉丁字母

 

life-style-position:
CSS文件:
<style type="text/css">

.inside{

  list-style-position:inside;

}

.outside{

  list-style-position:outside

}

</style>

HTML文件:

<ul class="inside">

  <li> HTML——网页结构</li>

  <li>CSS——网页样式</li>

  <li>JS——网页交互</li>

</ul>

 

<ul class="outside">

  <li> HTML——网页结构</li>

  <li>CSS——网页样式</li>

  <li>JS——网页交互</li>

</ul>

结果:

 

 

list-style-image:

可以规定列表的标号是图片,起到美化界面的效果。

list-style-image: url("images/bullet1.gif");

 

3.5 CSS表格样式

表格大小:width,height 宽高

table{width:500px;height:200px;}

表格边框:border  boder-collapse属性:合并表格和单元格边框样式

table,td,th{border:1px solid #eee;}

table{boder-collapse:collapse;} 使表格边框和单元格边框重叠

奇偶选择器:nth-child(odd|even)    例如隔行显示不同的颜色

表头单元格th单独设置即可

tr:nth-child(odd){ }   tr表示行,odd表示奇数,#EAF2D3设置绿色

 


 

4.CSS布局与定位

 

4.1 盒子模型

概念:页面中所有元素都可以看成一个盒子content,占据着一定的页面空间

content内容  padding 内边距  border 边框  margin  外边距

 

其中padding,border,margin 都有四个子属性:

-top  -bottom -left -right

一个盒子的实际宽度、高度:content+padding+border+margin

 

 例子:

CSS文件:

<html>

<head>

<style type="text/css">

#box{                  # id选择器,只能使用一次

  width:100px;

  height:100px;

  border:1px solid:

  padding:20px;

  margin:10px;

}

</style>

</head>

HTML文件:

<body>

<div id="box">

  内容内容内容...

</div>

</body>

当内容溢出盒子边框时,overflow属性取值:

hidden:超出部分不可见

scroll:显示滚动条

auto:如果有超出部分,显示滚动条

border属性子属性:

border-width:px、thin、medium、thick

boder-style:dashed(虚线)、dotted(点线)、solid(单实线)、double(双实线)

border-color:颜色

简写border: width style color

水平分割线:

.line {

  height:1px;

  width:500px;

  border-top:1px solid #e5e5e5

}

padding属性:

padding取值:px,%(相对于外层盒子)

首先,对浏览器默认设置清0

* {

     margin:0;

  padding:0; 

 }

margin属性:

margin:1px;  =   margin:1px 1px 1px 1px

margin: top  right bottom left   上右下左——顺时针顺序

若省略后两个值,则代表上下相等,左右相等

margin的合并:垂直方向合并(那个边距大选哪个 ),水平方向不合并

水平居中:

图片、文字居中:text-align:center;

div水平居中:margin:0 auto;

举例:假设有一个大盒子newsimglist  现要往盒子里放三张图片

首先需要消除浏览器默认文字间隙:

#newsimglist{

  font-size:0;  /*否则图间有间隙*/

}

然后用嵌套选择器定义每幅图片:

#newsimglist img{

    height:100px;

    width:100px;

    margin-left:5px;

    border:1px solid #0cf

    padding:5px;

}

 

4.2 CSS定位机制

CSS中,存在3种定位机制:文档流定位,浮动定位,层定位

文档流定位为默认定位

4.2.1 文档流定位

所有的元素从上到下,从左到右依次排列。

元素分类:block、inline、inline-block

元素类型可以通过display属性进行转换

block类型元素

block元素特点:1.独占一行  2.元素的height、width、margin、padding都可设置

常见block类型元素:<div>    <p>    <h1>...<h6>    <ol>    <ul>    <table>    <form>

将元素显示为block元素:

a{

  display:block;

}

inline元素a转换为block元素,从而使a元素具有块状元素特点(独占一行)

inline类型

inline类型特点:1.不独占一行  2.width、height 不可设置  3.width就是它包含的文字或图片的宽度,不可改变

常见的inline元素:<span>    <a>

将元素显示为inline元素:

div{

  display:inline;

}

inline元素的间距问题:元素之间默认有间隙,处理起来比较麻烦,一般采用转化为block

inline-block类型

顾名思义,即同时具备inline元素,block元素的特点

inline-block类型特点:1.不单独占用一行   2.元素的height、width、margin、padding都可设置

常见inline-block类型元素:<img>

显示为inline-block元素:display:inline-block;

 

4.2.2 浮动定位float

div实现横向多列布局

float属性:left——左浮动    right——右浮动    none——不浮动

div{

  width:200px;

  height:200px;

  border:1px solid red;

  float:left;

}

<div id="box1"></div>

<div id="box2"></div>

此时box1和box2已经水平排列。

float属性特点:此处用几张图来说明

 

 

 

 

 

 

 

 

 

 clear属性:

clear取值:

both——清除左右两边的浮动

left和right——清除一个方向的浮动

none默认值,不清除浮动

 

如上图,clear:right之后右边不能有浮动,故另开一行。

 

 

# footer{

  clear:both;

}

 

4.2.3 层定位

像图像软件中的图层一样可以对每个layer能够精确定位操作

postion属性:static——文档流    fixed——固定定位    relative——相对定位    absolu——绝对定位

position——fixed

相对于浏览器窗口进行定位,不会随浏览器窗口的滚动条滚动而变化,总在视线里

#fix-box{

  width:200px;

  height:200px;

  border:1px solid red;

  position:fixed;

  left:100px;   /*距离浏览器左侧的距离*/

  top:50px;    /*距离浏览器顶部的距离*/

}

position——relative

定位为relative的元素脱离正常的文档流中,但其在文档流的位置依然存在(下一个static不会取代)

relative定位的层总是相对于其直接父元素,无论其父元素是什么定位方式

#relative-box{

  position:relative;

  top:20px;

  left:20px;

}

position——absolute

定位为absolute的层脱离正常文本流,但与relative的区别在于原位置不再存在(下一个static会取代)

对于absolute定位的层总是相对于其最近的定义为absolut或relative的父层,而这个父层并不一定是其直接父层

#absolute-box{

  position:absolute;

  top:20px;

  left:20px;

}

若所有父层都为定义absolute或relative,则其将相对body进行定位

注意:值可以为负数,负数即超出父盒子,起到扩展的作用

relative+absolute

结合使用,例如广告的图片和图片上的文字

 div{

  border:1px solid red;

  color:#fff

}

#box1{

  width:170px;

  height:190px;

  position:relative;

}

#box2{

  width:99%;

  position:absolute;

  bottom:0;  

}


 

5.CSS3

5.1圆角边框border-radius

 

 

border-top-left-radius——左上角的形状

border-top-right-radius——右上角的形状

border-bottom-left-radius——左下角的形状

border-bottom-right-radius——右下角的形状

取值:1. 水平值  2.垂直值     

若只有一个取值,则认为水平垂直方向取值相同

div{

  height:100px;

  width:150px;

  border:1px solid blue;

  border-top-left-radius:40px 20px;

  border-bottom-right-radius:20px;

}

常用:

1.四个方向都做圆角(做出半圆)

div{

  width:350px;

  height:50px;

  border:2px solid #a1a1a1;

  border-radius:25px;  /*四个角都做圆角,且是高度的一半*/

}

2.利用圆角边框做出圆形:只需半径为高度和宽度的一半即可

 

5.2 阴影box-shadow:

box-shadow取值:

inset——水平位移  垂直位移  模糊距离  颜色;

inset——可选,内部阴影

outset——默认值,外部阴影

div{

  width:300px;

  height:100px;

  background-color:#f90;

  box-shadow:10px 10px 5px #888  /*水平 垂直 模糊距离 颜色*/

}

 

文本与文字:

text-shadow:水平偏移  垂直偏移  阴影大小  颜色  

若省略阴影大小,则默认与文字一样大小

<h1> Web Design </h1>

h1{text-shadow:2px 2px #FF0000}

h1{text-shadow:2px 2px 4px #FF0000}

描边效果:

h1{text-shadow:0 0 3px #F00}

浮雕效果:

h1{

  color:white;

  text-shadow:2px 2px 4px #000;

}

word-wrap属性:允许唱单词、URL强制进行换行

取值:normal——正常  break-word——换行

5.3 @font-face规则:

@font-face{

  font-family: kastlerFont;  定义字体名称

  src:url('fonts/kastler.ttf'),       定义字体来源,逗号分隔

     url('fonts/kastler.eot'),

     url('fonts/kastler.woff'),

     url('fonts/kastler.svg');

}

p{

  font-family:kastlerFont;       引用字体

}

 

5.4 2D转换方法:

对元素进行旋转、缩放、移动、拉伸 

transform属性:rotate()——旋转    scale()——缩放

transform:rotate(x)

#rotateDiv{transform:rotate(30deg);}  正值,顺时针旋转30度(若负值则为逆时针)

transform:scale(x,y)  x:水平方向缩放倍数    y:垂直方向缩放的系数  0-1为缩小,大于1为放大

box:hover{transform:scale(1.2);}  鼠标悬停时图片缩放

 

5.5 过渡transition

将元素的某个属性从"一个值"在指定的时间内过渡到"另一个值"

transition取值:属性名  持续时间  过渡方法

transition-property——属性名|all 对哪个属性进行变化

transition-duration——持续时间

transition-timing-function——过渡使用的方法(函数)

  取值:linear    匀速

     ease    慢快慢

     ease-in    慢快

     ease-out    快慢

     ease-in-out    慢快慢

div{

  hetght:30px;

  width:100px;

  line-height:30px;

  border-radius:5px;

  color:#000;

  background-color:silver;

  transition:all 1s linear

}

div:hover{

  color:white;

  background-color:#45B823

}

<div>web sign</web>

 

5.6 animation动画:

(1) 定义动画: @keyframes规则

(2) 调用动画: animation属性

@keyframes mycolor{           /*定义关键帧*/

  0%  {background-color:red;}      最开始播放

  30%     {background-color:blue;}

  60%  {background-color:yellow;}

  100%   {background-color:green;}    播放完成

}

div:hover{

  animation:mycolor 5s linear;

}

animation属性取值:

animation-name:  引用@keyframe动画的名称

animation-duration:  动画完成时间

animation-timing-function:  规定动画速度曲线,与transition取值相同。默认是"ease"

animation-play-state:  running(播放)|paused(停止)   鼠标悬停播放动画,鼠标移出不再播放

 

5.7 3D变换

transform属性:transform-style:preserve-3d

transform属性:rotateX()  rotaeY()  rotateZ()     角度deg

perspective属性:像素值越小,离舞台越近;像素值越大,离舞台越远

二维变换,无透视。三维变换,有透视

3D变换通常将要变换的元素嵌套:舞台>父容器>内容

父容器->旋转

transform-style:preserve-3d;

transform:rotateY(60deg)

舞台->透视关系

 perspective:100px;    眼睛到舞台的距离

举例:

<div id="stage">

  <div class="box x">

    <img src="frog.jpg">

  </div>

  <div class="box y">

    <img src="frog.jpg">

  </div>  

       <div class="box z">

    <img src="frog.jpg">

  </div>

</div>

#stage{

  width:300px;

  margin:100px auto;

  perspective:100px;

}

.box{

  width:100px;

  height:100px;

  float:left;

  transition:linear 1s;

  transform-style:preserve-d;

}

box{

  width:75px;

  height:100px;

}

.x:hover{ transform:rotateX(60deg);}

.y:hover{ transform:rotateY(60deg);}

.z:hover{ transform:rotateZ(60deg);}


 

 

6. Sublime Text 操作:

link:css   形成链接样式表文件的代码

div#nav  生成带有id属性的标签

div.bar   生成带有class属性的标签

w30    width:30pxl;

h30   height:30px;

mg10   margin:10px;

pd5  padding:4px

lh2em  line-height:2em

bgc   背景颜色

ctrl+s 保存

bdrs  border-radius扩展

bxsh box-shadow扩展

transform:rotate()  旋转扩展

这篇关于WEB前端开发--3(CSS样式)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!