css-01

最新推荐文章于 2024-11-06 09:49:17 发布

雯雯紫云府

最新推荐文章于 2024-11-06 09:49:17 发布

阅读量593

点赞数 27

文章标签： css 前端

本文链接：https://blog.csdn.net/wenwenzi__/article/details/139681049

版权

1.css简介

在网页设计中，运用CSS3技术能够让呆板的网页变得生动有趣，很多站点都为自己的页面添加
了各种炫酷的CSS3效果。但是CSS技术是怎样发展起来的?哪些浏览器能够很好地兼容 CSS3?
本节将对CSS的发展史及浏览器兼容情况进行介绍。

1.1什么是css

CSS 以HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还
可以针对不同的浏览器设置不同的样式。图中文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的。CSS 非常灵活，既可以嵌入在HTML 文档中，也可以是一个单独的外部文件。

1.2css发展史

·CSS1
1996年12月,W3C发布了第一个有关样式的标准CSS1。这个版本中，已经包含了字体(font)的相关属性、颜色与背景的相关属性、文字的相关属性、块(box)的相关属性等。

.CSS2
1998年5月，CSS2正式推出，这个版本开始使用样式表结构。

.CSS2.1
2004年2月，CSS2.1正式推出，它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。

·CSS3
早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有制定出来，但是各主流浏览器如今已经支持其中的绝大部分特性。

2. 文本样式属性

2.1字体样式属性

1.font-size:字号大小

font-size: 用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.

em:倍率,相对于当前对象内文本的字体尺寸

px:像素,最常用.推荐使用像素长度单位px.

p{font-size: 30px;}

2.font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{font-family: "微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

p{font-family: "华文彩云","宋体","黑体";}

3.font-weight:字体粗细

属性值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100~900(100的整数倍)	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。值越大字体月越粗

4.font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

<style>

em{

/*重点

变正常字体*/

font-style: normal;

}

h2{

/*变斜体*/

font-style: italic;

}

</style>

</head>

<body>

<em>DATA</em>



</body>

5.font:综合设置字体样式 (重点)

选择器{font:font-style font-weightfont-sizefont-family;}

3.选择器

3.1标签选择器

标签选择器是指用HTML标记名称作为选择器,为页面中某一类标记对应的元素指定统一的css样式.基本语法格式为:

标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

3.2类选择器

类选择器使用"."(英文点号)进行标识,后面紧跟类名.其基本语法格式为:

.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

.box{

color: red;

font-size: 30px;

}

3.3id选择器

id选择器使用"#"进行标识,后面紧跟id名,其基本语法格式:

#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

#na{

color: red;

font-size: 30px;

}

3.4通符选择器

通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有元素,其基本语法格式:

*{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

*{

color: red;

font-size: 30px;

}

总结:

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

4.伪类选择器(重点)

定义超链接是,为了提高用户体验,网页设计者经常需要为超链接不同的状态指定不同的样式,是的超链接在点击前点击后和鼠标指针悬停是的样式不同.

/*1.未访问链接*/

a:link{

color: aqua;

}

/*2.已访问链接*/

a:visited{

color: pink;

}

/*3.鼠标移动到的链接*/

a:hover{

color: darkgreen;

}

/*4.选定的链接*/

a:active{

color: orangered;

}

5.CSS外观属性

5.1color：文本颜色

.item{

/*1.预定定义*/

color: red;

/*二进制 1 0

八进制 0-7

十进制 0-9

十六进制 0-9 a-f A_F

*/

/*十六进制表示法 0-9 A-f 0最小 F最大*/

color: #000000;

/*color: #ffffff;*/

color:#ff0000;

color:#00ff00;

color:#0000ff;

/*3.rgh,red,greed,blue 0-255*/

color: rgb(0, 0, 0);

/*4.rgb alpha 透明度 0-1*/

color: rgba(255, 0, 0, .5);

color: rgba(255, 0, 0, 0.5);

}

5.2line-height：行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

5.3text-align：水平对齐方式

left：内容左对齐。
center：内容居中对齐。（重点）
right：内容右对齐。
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

h2{text-align: justify;} /* 两端对齐 */

h2{text-align: center;} /*居中对齐*/

5.4单行文本水平垂直居中

.box{

width: 100px;

height: 100px;

border: 1px solid orangered;

/* 垂直居中 */

line-height: 100px;

/* 水平居中 */

text-align: center;

}

5.5图片水平垂直居中

<style>

.box {

width: 500px;

height: 500px;

border: 1px solid red;

/* 设置给盒子父元素 */

text-align: center;

line-height: 500px;

}

/* 不对 */

img{

text-align: center;

}

/* 错误 */

span{

text-align: center;

}

</style>

</head>

<body>

<div class="box">

<img src="v2-d339fe690eeaa82643c07b32d4ad3248_1440w.png" width="200">

<span>你好呀</span>

</div>

</body>

5.6text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

p{

/* 首行缩进 */

text-indent: 2em;

}

5.7text-decoration：文本修饰

none：无装饰(正常文本默认值)
underline：下划线
overline：上划线
line-through：贯穿线

.text1{

/* 贯穿线,删除线 */

text-decoration: line-through;

}

.text2{

/* 下划线 */

text-decoration: underline;

}

.text3{

/* 上划线 */

text-decoration: overline;

}

a{

/* 去掉下划线 */

text-decoration: none;

}