WEB前端开发--3（CSS样式）

2022/2/18 23:18:42

编程Tag： web css Font width height color 前端开发 border --

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

WEB 前端开发--3（CSS样式）

1. CSS概述

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

CSS：Cascading Style Sheets 层叠样式表

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

1.1 CSS语法

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

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

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

color:blue; /*颜色*/

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

}

1.1.1 CSS 添加方法——行内

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

</p>

1.1.2 CSS添加方法——内嵌

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

<head>

　　　color:red;

}

</style>

</head>

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

外部样式表文件

style.css

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

}

h1{

color:blue;

}

1.htm

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</body>

</html>

单独文件优点：

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

维护方便

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

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

1.1.4 CSS添加方法——优先级

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

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

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

2.CSS 选择器

2.1 标签选择器

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>

　　<hr>

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

<body>

2.2 class类别选择器

点开头 px:pixel 像素

CSS文件：

p {font-size:12px;}

.one{font-size:18px;}

.two{font-size:24px;}

</style>

HTML文件：

<body>

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

</body>

2.3 ID选择器

CSS文件：

#one{font-size:12px;}

#two{font-size:24px;}

</style>

HTML文件：

<body>

</body>

2.4 嵌套声明：

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

CSS文件：

p span{

　　　color:red;

}

</style>

HTML文件：

<body>

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

</body>

2.5 集体声明

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

CSS文件：

h1,p {text-align:center; }

</style>

HTML文件：

<body>

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

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

</body>

2.6 全局声明

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

* {text-align:center; }

</style>

2.7 关于混合使用

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

id和class选择器混用：

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文件：

　　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>

</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>

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

　　width:100px;

　　height:100px;

　　border:1px solid:

　　padding:20px;

　　margin:10px;

}

</style>

</head>

HTML文件：

<body>

　　内容内容内容...

</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元素：

　　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;

}

此时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');

}

　　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

}

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>

　　</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样式）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

WEB前端开发--3（CSS样式）

相关编程文章