8.CSS基础知识

本文链接： https://blog.csdn.net/Carol_x/article/details/102326889

css样式概述

1.css(cascading style sheets 层叠样式表)样式
*它并不属于HTML，把css样式应用于html,可以扩展html功能
*作用：将样式和内容分开

*css样式定义

div {color:blue;font-size:12px;}
选择器 属性 值    属性       值

css样式特点:
*css样式中选择器严格区分大小写，而属性和值不区分大小写。
*多个属性之间必须用英文分号隔开。
*如果属性的值由多个单词组成，且中间包含空格，则必须为这个值加上英文引号
*|*....*|注释
2.css选择器
####要使用css对html页面元素实现一对一，一对多，多对一的控制，这就要用到css选择器。
2.1基本选择器：
1）通用选择器
在这里插入图片描述
*{属性1：属性值1；属性2:属性值2;...;属性n:属性值n;}
例如：

*{
margin:0;/*定义外边距*/
padding:0;/*定义内边距*/
}

此意为清除HTML的默认边距
2）标签选择器
在这里插入图片描述
标签名{属性1：属性值1；属性2:属性值2;..;属性n:属性值n;}
例：在一个简单的无序列表项中为标签li添加样式

<style type="text/css">/*内嵌式：将CSS代码写在当前页面的成对标签<style>里，一般放在<title>后面*/
ul{
   color:red;
   font-size:26px;
   font-family:楷体;
}
</style>

原来：
在这里插入图片描述
添加后：

3）类选择器
.类名{属性1：属性值1；属性2:属性值2;..;属性n:属性值n;}
<div class="类名" > </div> 在这里插入图片描述
为服装，购物添加类选择器：

.blue {
	color: blue
}
<body>
	<ul>
		<li>图书</li>
		<li class="blue">服装</li>
		<li>食品</li>
		<li class="blue">团购</li>
	</ul>

</body>

在这里插入图片描述
4）id选择器
#id名{属性1：属性值1；属性2:属性值2;..;属性n:属性值n;}
<div id="id名" >...</div>
例：对食品设置id样式

#myID {
	color: yellow;
	font-size: 36px;
	font-family: 宋体;
}
修改图书
<li id="myID">图书</li>

在这里插入图片描述
注意点
当页面元素唯一时，通常使用id属性；如果有多个相同类型相同风格的元素如复选框等，一般用class
选择器优先级从高到低是:ID选择器>类选择器>标签选择器>通用选择器
例如：在团购上添加id选择器

#myid{
color:green;
}
修改团购
<li class="blue" id="myid">团购</li>

在这里插入图片描述

2.2组合选择器
在这里插入图片描述
1）后代选择器(最常用）
后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌到时，内层标签就成为外层标签的后代

#nav li a {
	color: red;
	font-size: 18px;
}

html语句：
<ol id="nav">
		<li><a href="#">css基本概述</a></li>
		<li><a href="#">css选择器</a></li>
		<li><a href="#">css文本样式建立</a></li>
		<li><a href="#">css页面外观</a></li>
	</ol>

在这里插入图片描述
2）子选择器
子选择器就是特殊的后代选择器，用来选择某个元素的直接后代，父子选择器之间用>分隔，子选择器只能出现在后代选择器之后，否则，效果被子选择器覆盖

#links a{
    color:red;/*元素links的所有超链接为红色*/
    }
    #links>a{
    color:blue;/*元素links的首个超链接被修改为蓝色*/
    }
    又如：
    ul>li{
    color:blue;/*所有li都是ul的儿子，因此，所有的列表项都将为蓝色*/
    }

例子：

后代选择器
#links a{
color:aqua;
}
<p id="links">
	<a href="#">测试子选择器1</a>
	<span><a href="#">测试后代选择器</a></span>
	<a href="#">测试子选择器2</a>
	</p>

在这里插入图片描述

测试子选择器
#links>a{
color:red;
}

在这里插入图片描述
3）交集选择器
交集选择器由两个选择器构成，其中一个为标签选择器，第二个为class类选择器或id选择器，两个选择器之间使用”.“或”#“分隔

<style type="text/css">
.menu ul a.first{
color:green;
}
</style>
<ul>
<li><a href="#" class="first">首页</a></li>
<li><a href="#">web前端开发</a></li>
<li><a href="#">css样式</a></li>
</ul>

在这里插入图片描述
4）并集选择器
并集选择器是各个选择器通过逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分。
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器

ul,p,.box,span{
fonr-size:12px;
color:red;
}
body中语句
<ul>
<li><a href="#" class="first">首页</a></li>
<li><a href="#">web前端开发</a></li>
<li><a href="#">css样式</a></li>
</ul>
<p>苦苦地寻寻觅觅，却只见冷冷清清，怎不让人凄惨悲戚</p>
<p>乍暖还寒的时节，最难保养休息。</p>
<h1 class="box">我是红色</h1>
<span>我来组合文档中的行内元素</span>

在这里插入图片描述
5）伪类选择器
*同一个标签，根据其不同的状态，有不同的样式，这称为“伪类”。伪类用冒号“：”来表示。
*例如：a:hover(鼠标位于超链接上时），image:hover和p:after(在选定的元素后插入内容）
*”伪“的含义是：它不像类选择器那样需要使用class属性

css样式概述

猜你喜欢