前端基础之CSS

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿。于是CSS诞生了。css:最大的贡献就是让HTML从样式中解脱,实现了HTML专注于结构呈现,样式交给CSS。

1、CSS的初识

css(Cascading Style Sheets)类化样式,提供了丰富的功能,如字体、颜色背景的控制及整体排版等,而且可针对不同的浏览器设置不同的样式。

1.1、引入CSS样式表

书写位置:内部样式表、行内样式、外部样式表

(1)行内式(内联表式)(偶尔使用)

内联表式,又称行内样式、行间样式。是通过标签的style属性来设置元素的样式,其基本语法为:

<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"> 内容 </标签名>

如,将h4标签中的青春不常在改为粉红色字体大小改为25px、将input控件中的默认文字修改淡灰(color、font-size)

<h4 style="color:pink;font-size:25px">青春不常在,抓紧谈恋爱</h4>

<input type="text" value="福州" style="color:#ccc;">

(2)内部样式表

内嵌式是将CSS代码集中写在HTML文档的头部标签中,并用style标签定义,基本语法格式如下:

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>

语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的如何地方。

type="text/CSS"可以省略。例如,改变前例表单中所有td标签中文字的色彩,和行间的距离

<head>
	<meta charset="UTF-8">
	<title>表格测试</title>
	<style>
		td {
			color:grey;
		}
		tr {
			height:36px;
		}
	</style>
</head>

(3)外部样式表(外链式)

链入式是将所有样式放在一个或多个.CSS为扩展名的外部样式文件中,通过link标签将外部样式文件链接到HTML文档中,其基本语法格式如下:

<head>
    <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

需要注意的是link为单标签。

如将上诉中样式的修改,改为外部的css文件,则,首先创建了一个style.css文件,进行链接即可

<link rel="stylesheet" href="style.css">
tr {
	height: 36px;
}
td {
	color:grey;
}

(4)三种样式总结

1.2 CSS样式规则

使用HTML时,需要遵循一定的规范。CSS亦如此,CSS具体格式如下:

选择器:要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。(选择某个标签)

1.3 CSS基础选择器

(1)标签选择器(元素选择器)

标签选择器是指用HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 或者
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时也是他的缺点,不能差异化样式。(上例中所使用的均为标签选择器)

(2)类选择器

类选择器使用“,”(英文逗号)进行标识,后面紧跟类名,其基本语法格式如下:

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

标签调用的时候用class="类名"即可。

对于长名称或词组可以使用中横线为选择器命名,不建议使用_下划线来命名CSS

类选择器最大的优点是可以为元素对象定义单独或相同的样式。例如,将以前的表单中的文字赋予粉色和蓝色

<span class="woman">温柔</span><input type="checkbox" name="love">
<span  class="woman">体贴</span><input type="checkbox" name="love">			
<span class="man">阳光</span><input type="checkbox" name="love" >
<span class="man">国庆</span><input type="checkbox" name="love">

同时css文件中添加

.woman {
	color: pink;
}
.man {
	color:skyblue;
}

效果如下

(3)多类名选择器

当为一个标签内容赋予多个类名时,只要在class中的类名加一个空格再加另一个类名即可,如

<body>
	<div class="green font20">多类名选择器</div>
	<div class="red">多类名选择器</div>
	<div class="woman">多类名选择器</div>
	<p class="green">good luck</p>
	<p class="red">good luck</p>
	<p class="woman">good luck</p>
</body>
.woman {
	color: pink;
}
.man {
	color:skyblue;
}
.red {
	color:red;
}
.green{
	color:green;
}
.font20 {
	font-size:20px;
}

注意:

1、样式显示效果跟HTML元素中的类名先后顺序无关,受CSS样式书写的上下关系(如为同一段落p赋予green和red两个类,且均为色彩,决定其最后色彩的是red和green在css中的顺序)

2、多个类名之间用空格隔开

(4)id选择器

id选择器与类选择器使用方法上类似,只是在style定义中用#且,在标签中引用时用id而非class。

使用上class好比人的名字可以多次重复使用,而id相似于人的身份证号,一个id只可以使用一次。

#handsome {
	color:skyblue;
}
<p id="handsome">guoqing is handsome</p>

(5)通配符选择器

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

*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
* {
	color:pink;
}
<body>
	<div>fuzhou</div>
	<p>fuzhou university</p>
	<span>hard study</span>
</body>

2、CSS字体样式属性

2.1 font-size:字号大小

font-size属性用于设置字号。该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用。推介使用像素单位px,绝对长度单位使用较少。具体如下:

div {
	font-size:30px;
}
<div>字体大小</div>

2.2 font-family:字体

font-family属性用于设置字体,网页中常用的字体有宋体、微软雅黑、黑体等

div {
	font-size:30px;
	font-family:"宋体";
}
<div>字体大小</div>

在设置多个字体时,需用逗号隔开,系统在显示时首先判断是否有第一个字体,没有则判断第二个,若都没有则显示默认系统字体。

div {
	font-size:30px;
	font-family:"宋体","微软雅黑";
}

在字体名称中,使用Unicode编码兼容性更好(由于存在/需要加引号)

2.3 font-weight:字体粗细

字体加粗除了使用b和strong标签之外,可以使用CSS来实现,但是CSS是没有语义的。

font-weight属性用于定义字体的粗细,其可用属性值为:normal、bold、bolder、lighter、100~900(100的倍数 没有单位)

(数字400等价于normal,700等价于bold),如想要为文中的超链接字体加粗

a {
	font-weight:bold;
}
<div>2017年07月16日20:11 新浪体育 评论中大奖<a href="#">收藏本文</a></div>

2.4 font-style:字体风格

字体倾斜除了i和em标签外,可以使用CSS来实现,但是CSS是没有语义的。

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

   normal:默认值,浏览器会显示标注的字体样式

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

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

(平时很少会给文字加斜体,反而喜欢给斜体标签em、i改为普通模式)

2.5 font:综合设置字体样式

选择器 {font:font-style font-weight font-szie/line-height font-family;}

顺序是可以按照以上顺序,其中font-size和font-family属性必须保留,否则会报错。

3 CSS外观属性

3.1 color:文本颜色

(1)预定义的颜色值,如:red、green、blue等;

(2)十六进制,如#FF0000,#FF6600,#29D794等,十六进制为最常用的定义颜色方式。(#rr gg bb六位红红绿绿蓝蓝)(两两相同可简写为三个)

(3)RGB代码,红色可表示为rgb(255,0,0)或rgb(100%,0%,0%)

.red {
	color:#ff0000;
}
<span class="red">新浪体育 评论中大奖</span>

3.2 line-height:行间距

line-height属性用于设置行间距,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,绝对值em和百分比%,实际中使用最多的是像素px。

 

 

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页