昔洛 的个人博客

Bug不空,誓不成佛

目录
记录前端学习----第三天
/        

记录前端学习----第三天

学习内容

  • 什么是 CSS
  • CSS 的三种引入方式
  • 书写规范
  • CSS 基础选择器
  • CSS 复合选择器
  • 字体样式
  • 颜色表示
  • 首行缩进
  • 文字对齐方式
  • 文字的线的样式

1、什么是 CSS

     CSS(Cascading Style Sheets)CSS 通常称为 CSS样式表或层叠样式表(级联样式表),主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS 以 HTML 为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

2、CSS 的三种引入方式

① 行内式引入

CSS 的行内式引入就是在 HTML 标签元素的属性中设置 Style,其基本格式语法如下:

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

一个小案例代码及效果如下:

<p style="color:red;font-size:24px;">青春有限,抓紧赚钱!</p>

青春有限,抓紧赚钱!

② 内部样式表(内嵌样式表)

内嵌式大多是指在 HTML 文件里的 标签内写入 样式
基本语法如下:

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

③ 外链式

css 第三种引入方式是通过 html以外的文件进行链接建立关系来引入的,基本格式如下:

<head>
	<link rel="stylesheet" href="CSS文件的路径" />
</head>
标签是单标签。其中
  • href:定义所链接外部样式表的URL,可以使相对路径,也可以是绝对路径。
  • type:定义所连接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为CSS 样式表。可以省略。
  • rel:定义当前文档与被连接文档之间的关系,在这里需要指定为"stylesheet",表示被连接的文档是一个样式表文件。

总结:

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 没有实现样式和结构的分离 较少 控制一个标签(少)
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
外部样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多)

3、书写规范

① 命名规范
在使用类选择器时,需要给标签进行设置class属性,其中属性的名称不能以纯数字或者数字开头,也不允许特殊符号(除_-)进行命名。
② 尽量使用英文。
③ 书写格式尽量参照如下:

选择器 {
	属性: 属性值1;
}

4、CSS 基础选择器

① 标签选择器

标签选择器则是以 HTML 的标签直接进行选择,为页面某一标签指定统一的 CSS 样式。
语法:

标签名{属性1:属性值1;属性2:属性值2;}作者
元素名{属性1:属性值1;属性2:属性值2;}

② 类选择器

主要用于可以选择一个或多个标签
用法:样式声明点->结构调用class
语法:

<style>
	.类名 {
		属性1:属性值1;
	}
</style>
<body>
	<p class="类名">今天天气好</p>
</body>

③ 多类名选择器

可以给标签指定多个类名,从而达到更多的选择目的。
实例结构如下:

<style>
	.one {
		font-size:14px;
	}
	.two {
		font-weight:700;
	}
	.three {
		color: red;
	}
</style>
<body>
	<p class="one two">one</p>
	<p class="two three">two</p>
	<p class="one two trhee">three</p>
</body>
/*
	p-one 可以被 .one 和 .two 修饰
	p-two 可以被 .two 和 .three 修饰
	p-three 可以被 .one,.two 和 .three修饰
*/

④ id 选择器

id 选择器用于选择已设置 id 属性的 HTML 标签,设置样式是用#id 进行选择,其基本语法如下,:

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

PS:id选择与类选择器的区别主要是 id 只能设置1个,而 class类可以设置多个。

⑤ 通配符选择器

通配符选择器用"*"表示,*就是所有的,它匹配页面中的所有元素,效率也是最慢的,其基本格式如下:

* {属性1:属性值1;}
/* 如下代码就是清除 HTML 页面所有标记的默认边距 */
* {
	margin: 0;
	padding: 0;
}

总结:

选择器 作用 缺点 使用情况 用法
标签选择器 可以选出所有相同的标签,比如 div 不能差异化选择 较多 div {color: red;
类选择器 可以选择出 1个或者多个标签 可以根据需求选择 非常多 .nav{color:red;}
id选择器 一次只能选择1个标签 只能使用一次 不推荐使用 #nav {color:red;}
通配符选择器 选择所有的标签 选择的太多,有部分不需要 不推荐使用 * {color: red;}

5、复合选择器

① 后代选择器

顾名思义,后代选择器就是可以选择一个祖宗的所有后代,也就是可以选择包含标签,用来选择元素或元素组的后代,其写法就是把外层标签写前面,内层标签写后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
示例如下:

<style>
	div span p {
		属性1:属性值1;
	}
</style>
<body>
	<div>
		<span>
			<p></p>
		</span>
	</div>
	<span>
		<p></p>
	<span>
</body>
/* 最终会对 div 里面的 标签p 进行css样式设置 */

② 子元素选择器

子元素选择器又称为父子选择器,其意义只能选择作为某元素子元素的元素。其写法就是吧父级标签写在前面,子集标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
示例代码如下:

<style>
	div > p {
		font-size: 40px;
	}
</style>
<body>
	<div>
		<p>one</p>
		<p>two</p>
		<span>
			<p>
				test
			</p>
		</span>
		<p>three</p>
	</div>
</body>
/* 其效果就是one,two,three被选择进行css修饰了 */

③ 交集选择器

交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。
可以理解交集选择器是并且的意思,即。。又。。
如:
p.one 选择的是: 类名为 .one 的段落标签

④ 并集选择器

并集选择器是可以一次进行多个选择的,中间用逗号隔开,任何形式的选择器都可以作为并集选择器的一部分,如果某些选择器定义的样式相同,那么就可以用并集选择器进行定义相同的 CSS 的样式
用法:

<style>
	p,div,.one {
		属性: 属性值;
	}
</style>
<body>
	<p></p>
	<div></div>
	<p class="one"></p>
</body>

⑤ 相邻选择器

相邻选择器就是为了精确选择选择器1后面的选择器2,用法:选择器1 + 选择器2
div+p 是为了选择紧挨着 div 后边的 p 标签
示例如下:

<style type="text/css">
	div + p {
		color: red;
	}
</style>
<body>
	<div>
		<p>one</p>
		<p>two</p>
		<span><p>three</p></span>
		<p>four</p>
	</div>
	<p>five</p>
	<p>six</p>
</body>
/* 结果只有 five 被修饰了红色 */

注意,相邻选择器对li来说有点特殊示例即效果如下:

<style type="text/css">
	.test li+ li {
		color: red;
	}
</style>
<body>
	<ul class="test">
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>four</li>
	</ul>
</body>
  • one
  • two
  • three
  • four

因为对于 li 来说,里后面一定只剩下li,所以浏览器默认处理除第一个li后面的li都会被选上。

⑥ 伪类选择器

连接伪类选择器:

  • :link 未访问连接
  • :visited 已访问连接
  • :hover 鼠标移动到连接上
  • :active 选定的连接
  • :focus 光标焦点的元素

写的时候要尽量按照 lvha 顺序。
因为是伪类选择器所以都是利用交集选择器 a:link a:hover 示例如下:

<div>
	<style>
		.test:link {
			color: pink;
		}
		.test:visited {
			color: red;
		}
		.test:hover {
			color: yellow;
		}
		.test:active {
			color:green;
		}
		input.test:focus {

			background: #F00;
		}
	</style>
	<a href="#" class="test">随便点我测试</a>
	<input class="test" text="text"/>
<div>
随便点我测试
需要注意的是:如果有设值 a标签的默认颜色,则会默认是 a:link 方式设置,此时其他的 visited hover active 全都是设置的 a:link方式(以权重为标准,其他都是同样的权重默认设置),若需要设置样式,每个都需要写出来。 如果要修改选中的 a 标签里面的元素,则用并列选择,并且用以下语法:

a:hover span {}

上述伪类选择器也可以用于其他的标签例如div,代码如下

<style>
.div:hover {
background-color: green;
}
.div:active {
background-color: blue;
}
</style>
<div class="div" style="width: 50px; height: 50px; background-color: red;"></div>

总结:

选择器 作用 特征 使用情况 用法
后代选择器 用来选择元素或元素组的后代 是选择所有的子孙后代 较多 div p {color: red;}
子代选择器 选择作为某元素子元素的元素 只选择亲儿子 较少 .nav > p {color: red;}
交集选择器 选择两个标签交集的部分 较少 a:link {color: red;}
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 .nav .header {color: red;}

6、字体样式

常用的字体样式如下:

  • font-size
  • font-familty
  • font-weight
  • font-style
  • word-spaceing
  • line-height

① font-size 文字大小,常用单位 px像素(推荐使用),em 相对于当前对象内文本的字体尺寸
效果如下:
<p style="font-size: 24px;">我变大了</p>

我变大了

② font-family 用于设置字体。网页常用的字体有宋体、微软雅黑、黑体,效果如下:

<p style="font-family: "微软雅黑";>我是微软雅黑</p>

我是微软雅黑

可以同时指定多个字体,中间以英文逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,知道找到合适的字体。
如下:font-family: arial,‘\5b8b\4f53’;
后面的代码是 Unicode字体,为防止有时浏览器解析中文错误,就使用这个方法,这个代码的获取的方式也很简单,在 chrome等浏览器的开发者工具控制台输入 escape()可以来测试什么字体,如下图所示:

image.png
只需将 %u改成\就行

注意:
1. 现在网页中普遍使用 14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有 bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
5. 如果字体名包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,比如 font-family: “Times New Roman”;。
6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

③ font-weight 字体的粗细,其可选的值为 100~900,需为100的倍数,也可直接设置样式:normal 默认值(400),bold 加粗(700).
效果如下:

<p style="font-weight: normal">我是 normal</p>
<p style="font-weight: bold">我是 bold </p>

我是 normal

我是 bold

④ font-style 字体的风格,其可选值是 normal 默认值不倾斜,italic 斜体,oblique 斜体.效果如下:
<p style="font-style: normal;">我是 normal</p>
<p style="font-style: italic;">我是 italic</p>
<p style="font-style: oblique;">我是 oblique</p>

我是 normal

我是 italic

我是 oblique

⑤ word-spacing 控制单词之间的距离,值越大,间距越大,可以为负值,对中文无效,letter-spacing 控制字符与字符之间的距离,值越大,间距越大,可以为负值,对中文有效。
效果下:

<p style="word-spacing: 20px;">I Love you</p>
<p style="letter-spacing: 20px;">你好呀</p>

I Love you

你好呀

⑥ line-height 行高,控制行与行之间的距离,normal 为默认值,效果如下:

<p style="line-height: 60px;">天不刮风,天不下雨天上有太阳,妹不开口妹不说话,妹心怎么想,走了太阳来了月亮又是晚上。北京天气很热,冬天很冷,天气无常。锄禾日当午,汗滴禾下土。吾不能变心之从俗兮,故将愁苦而终穷。</p>

天不刮风,天不下雨天上有太阳,妹不开口妹不说话,妹心怎么想,走了太阳来了月亮又是晚上。北京天气很热,冬天很冷,天气无常。锄禾日当午,汗滴禾下土。吾不能变心之从俗兮,故将愁苦而终穷。

⑦ 文字的综合设置:
基本语法:

选择器 {font:font-style font-weight font-size/line-height font-family;}按照顺序写,文字大小和字体必须写,其他的不写取默认值,示例如下:
<p style="font:20px/40px arial,'simsun'">今天天气炎热</p>

今天天气炎热

7、颜色表示

css 样式表中修饰颜色属性常带有 color属性,其属性值可以使用 #FFF #FFFFFF 16进制表示,也可以使用 rgb()实现,再选择颜色数值时可以配合一些工具进行获取颜色值,比如 photoshop 的吸管工具可以获取值,效果如下:

<span style="color: rgb(123,22,53);">五</span>
<span style="color: #BA8;">彩</span>
<span style="color: #AABCF1;">斑</span>
<span style="color: red;">斓</span>
<span>的世界</span>

的世界

8、首行缩进

text-indent 用来表示首行缩进的程度,单位 em 1个em相当于1个汉字的大小,效果如下:

<p style="text-indent: 2em;">今夜天气多云转晴,阳光明媚</p>

今夜天气多云转晴,阳光明媚

9、文字对齐方式

text-align 用来设置盒子里边内容的水平对齐方式,不能控制盒子本身,属性值有 left(默认值,左对齐),center(水平居中),right(右对齐)
效果如下:

<p style="text-align: left;">孙行者</p>
<p style="text-align: cener;">者行孙</p>
<p style="text-align: center;">行者孙</p>

孙行者

者行孙

行者孙

10、文字线的样式

text-decoration 用来设置线的颜色,其属性值有 none 默认值没有线,underline 下划线,line-through 删除线,overline 上划线。
效果如下:

<p style="text-decoration: none;">我是 none</p>
<p style="text-decoration: underline;">我是 underline</p>
<p style="text-decoration: line-through;">我是 line-through</p>
<p style="text-decoration: overline ;">我是 overline </p>

我是 none

我是 underline

我是 line-through

我是 overline

另外改变这个线的颜色方式有很多,这里以下划线举例,单纯用 text-decoration 是不能改变颜色的,可以使用<ins>与文字配合改变颜色,也可以使用 样式的 border-bottom 属性进行设置下划线的设置,效果如下:

<p><ins style="color: red;">我是ins设置的</ins></p>
<p style="border-bottom: 1px solid #F00">我是 border-bottom 设置的</p>

我是ins设置的

我是 border-bottom 设置的

内事不懂问百度,外事不懂问谷歌~
评论
歌名 - 歌手
0:00