初识CSS(一)

1.1什么是css

Cascading Style Sheet层叠级联样式表

CSS : 表现(美化网页)

字体,颜色,编剧,高度,宽度,背景图片,网页定位,网页浮动....

1.2CSS发展史

CSS1.0

一开始只能做一些简单的样式处理

CSS2.0

DIV(块) + CSS ,HTML与CSS结构分离的思想,网页变得简单,SEO

CSS2.1

添加了浮动,定位

CSS3.0

添加了圆角,阴影,动画.... 有浏览器兼容性问题

1.3快速入门

style(style.css)

语法:
	选择器 {
		声明1;
		声明2;
		声明3;
}

在原来的index页面引入style.css

<link rel="stylesheet" href="css/style.css"

css的优势

1 内容和表现分离

2 网页结构表现统一,可以实现复用

3 样式十分的丰富

4 建议使用独立于html的css文件

5 利用SEO,容易被搜索引擎收录!

1.4 CSS的四种导入方式

方法一:行内样式

<h1 style="color: red">你好</h1>

方法二:内部样式style标签

<style>
	color: green;
</style>

方法三:外部样式style.css

<link rel="stylesheet" href="css/style.css">

拓展:方法四:外部样式导入式(不推荐)

<style>
	@import url("css/style.css")
</style>

覆盖优先级:就近原则

2. 选择器

作用:选择页面上的某一个或者某一类元素

2.1 标签选择器

会选择到页面上所有的这个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<style type="text/css">
	h1 {
		color : red;
		background-color: antiquewhite;
		border-radius: 20px;
	}
</style>
	</head>
	<body>
		<h1>hello</h1>
		<h1>hello</h1>
		<h1>hello</h1>
	</body>
</html>

2.2类选择器

选择所有class属性一致的标签,跨标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<style type="text/css">
	.luo {
		color : black;
		background-color: #FF0000;
		border-radius: 20px;
	}
</style>
	</head>
	<body>
		<h1 class="luo">hello</h1>
		<h1>hello</h1>
		<h1>hello</h1>
	</body>
</html>

2.3 id选择器

id必须保证全局唯一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<style type="text/css">
	#li {
		color : black;
		background-color: #FF0000;
		border-radius: 20px;
	}
	.luo {
		color : black;
		background-color: #9d89ff;
		border-radius: 20px;
	}
</style>
	</head>
	<body>
		<h1 class="luo">hello</h1>
		<h1 id="li">hello</h1>
		<h1>hello</h1>
	</body>
</html>

三个选择器优先级不遵循就近原则,固定的

id选择器>class选择器>标签选择器

2.2层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器

2.3 结构伪类选择器

伪类: 条件

2.4属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

语法:[属性选择规则]{css样式}

1️⃣如果希望把包含标题的所有元素变为红色,可以写为:

*[title] {color:red;}

2️⃣与上面类似的,可以支队有href属性的(a元素)应用样式:

a[href] {color:red;}

3️⃣还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

根据具体属性值选择

1️⃣例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

2️⃣与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

根据部分属性值选择

1️⃣如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

字串匹配属性选择器

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="w3school.com.cn"] {color: red;}

特定属性选择类型

1️⃣

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

CSS选择器参考手册

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value]*	匹配属性值中包含指定值的每个元素。

更多关于CSS的学习内容请参考w3school:https://www.w3school.com.cn/css

posted @ 2020-08-03 20:19 longda666 阅读(62) 评论(0) 收藏举报

刷新页面返回顶部

longda666