css选择器和常见样式

最新推荐文章于 2024-04-26 22:18:52 发布

Valder__

最新推荐文章于 2024-04-26 22:18:52 发布

阅读量103

点赞数

分类专栏：前端css 文章标签： css html 前端

本文链接：https://blog.csdn.net/Valder__/article/details/127147671

版权

前端css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css的选择器

作用范围越小越显示

css中/**/表示注释

css使用过程

声明css代码域：一般使用style（在head中）
使用选择器选择要添加样式的标签

根据需求来选择

a.使用*选择器给页面添加基础样式

b.使用类选择器给不同的标签添加基础样式

c.使用标签选择器给某类标签添加基础样式

d.使用id，属性选择器，style属性声明方式给某个标签添加个性化样式

都在style标签中写

标签选择器

标签名{样式名1: 样式值1;…}
作用：会将当前网页内的所有该标签增加相同的样式

table{
		width:300px;
		height:200px;
		border:solid 1px;
		background-color:red;
}

id选择器

#标签的id属性值{样式名1: 样式值1;…}
给某个指定的标签添加
t1表示第一个表格，要先在table中定义

#t1{
		background-color:gray;
}

类选择器

.类选择器名{样式名1: 样式值1;…}
作用：给不同的标签添加相同的样式

.common{
		color:yellow;
}

全部选择器

*{样式名1: 样式值1;…}
作用：选择所有html标签并添加相同的样式

组合选择器

选择器1,选择器2,…{样式名1: 样式值1;…}
作用：解决不同的选择器之间重复样式的问题

.common,table{
		background-color:blue;
}

子标签选择器

选择器1 子标签选择器{样式名1: 样式值1;…}
将所有ul中的li中的a变为黑色
要想将一个变为其他的，就用id标签

ul li a{
		color:black;
}

属性选择器

标签名[属性名=属性值]{样式名1: 样式值1;…}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签

input[type=text]{
		background-color:red;
}

<html>
    <head>
	    <title>css的选择器学习</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			table{
				width:300px;
				height:200px;
				border:solid 1px;
				background-color:red;
			}
			
            
			#t1{
				background-color:gray;
			}
			
            
			.common{
				color:yellow;
			}
		
            
		.common,table{
			background-color:blue;
		}
		
		ul li a{
			color:black;
		}
		
		input[type=text]{
			background-color:red;
		}
		</style>
            
	</head>
    <body>
	    <h3>css的选择器学习</h3>
		<hr />
		<hr />
		<table id="t1">
			<tr>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
			
		</table>
		<table>
			<tr>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
			
		</table>
		<b>css学习</b>
		<hr />
		<ul>
			<li><a href="">哈哈</a></li>
			<li><a href="">呵呵</a></li>
			<li><a href="">哦哦</a></li>
		</ul>
		<a href="">嘻嘻</a>
		<hr />
		<input type="text" />
		<input type="password" />
	</body>
</html>

书写样式单

边框 border:solid 1px; 表示实线
字体

font-size:10px; 设置字体大小

font-family:“黑体”; 设置字体格式

font-weight:bold; 设置字体加粗

color:颜色设置字体颜色
背景图片

background-img:url(图片的相对路径);

background-repeate:no-repeate; 设置图片不重复

background-size:cover; 图片平铺整个页面
背景颜色 background-color:颜色;
高宽
浮动 float:left/right;
行高 line-height:10;