CSS的基本操作

0*..

已于 2022-04-24 08:43:41 修改

阅读量273

点赞数

分类专栏：笔记文章标签： html css

于 2020-10-19 22:14:09 首次发布

本文链接：https://blog.csdn.net/weixin_46714278/article/details/109167632

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

人机交互
CSS的基本操作
一、
CSS选择器

1. 标签选择器
直接在CSS中写入相应的结构代码

CSS
p{
	font-size = 16px;
	color = red;
}

<body>
	<p>修饰内容</p>
</body>

2.类选择器
也称为class选择器，可用于某一类元素

CSS
	.one{
		font-size:10px;
		}
	.twe{
		font-size:20px;
		}
	.red{
		color:red;	
		}
	.pink{
		color:pink;
		}
	.fors{
		font-size:18px;
		color:blue;
		}
	a.orange{
			color:orange;
			font-size:20px;
			}这种只对a标签修饰

<body>
	<p class="one ">修饰内容</p>
	<p class="one red">修饰内容</p>可以将多个样式写在一起
	<p class="fors">修饰内容</p>
	<a href="#" class="orange">修饰内容</a>
</body>

id选择器
用于定义某一类相同的样式，与class不同，在同一个HTML文件中，id名不能重复，通常用于定义特定的CSS规则，页面唯一的区域或者样式。

CSS
#menu{
	color:red;
	font-size:30px;	
	}
nav#menu1{
		color:orange;
		font-size:40px;
		}

<body>
	<p id="menu">修饰内容</p>
	<h3 id="menu">修饰内容</h3>
	<p id="menu">修饰内容,虽然“menu”依然修饰了这个p标签，但是在代码前有错误提示。</p>
	<nav id="menu1">修饰内容</nav>
	<p id="menu1">修饰内容，发现加入nav#menu1后，menu1只对nav进行修饰和刚刚的class的a.orange一样</h2>
</body>

分组选择器
当多个选择器声明的样式一样时，可以统一在一起进行声明，用“，”分开

CSS
red,#menu,footer{
				color:red;
				font-size:30px;
				}

<body>
	<nav id="menu">修饰内容</nav>
	<p class="red">修饰内容</p>
	<h1 class="footer">修饰内容</h1>

包含选择器（父子选择器）
为一个容器内的元素设置样式

CSS
p a{
	color:blue;
	font-size:25px;
	}

HTML
<body>
	<p>这是一个网页的地址<a href="#">链接</a></p>

CSS背景
1.背景颜色
语法：
颜色英文
background-color:blue;
颜色的十六进制值：#开头，前两位红色，中间两位绿色，最后两位蓝色
数值越大越接近白色
background-color:#0000ff;
rgb值：第一位红色，类推，有0~255个取值，值越大越接近白色
background-color:rgb(0,0,255)
半透明显示：rgba(r,g,b,alpha),最后一个表示透明度，范围：0~1.
background-color:rgb(0,0,0,0.6)
2.背景图片
background-image:url(地址)
3.背景重复
background-repeat:repeat(重复)/repeat-x(横向重复)/repear-y(纵向)/no-repeat(不重复)
4.背景位置
background-position：top/bottom/left/right/center
使用像素值
background-position:10 px 10 px,第一个决定水平，第二个决定垂直；正数：向右，向下移动；负数：向左，向上；
background-position:left 10 px top 10 px;前两个表示水平轴，后两个表示垂直轴。通过这种方法可以移动到任意位置。
5.背景大小
background-size:100 px 200px/90%/cover/content
6.简写
background：#00ff00 url(地址) repeat-x top 30 px left 30 px scroll

用法其他类似
<head>
<meta charset="utf-8">
<title>背景</title>
	<style type="text/css">
	body{	
		background-color:#000000;
		}
	</style>
</head>

CSS
body{
	background:url(C:/Users/%E9%BB%84%E9%91%AB/Pictures/2019-11/IMG_20191107_175708.jpg);
	background-color:antiquewhite;
	background-position: top 100 px left 50%
}

<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
	
	<link rel="stylesheet" type="text/css" href="选择器结构.css"/>
</head>

<body>

文字属性（P105）

超链接属性

1.伪类选择器
a:link 默认，未被访问的样式
a:visited 已访问
a:hover 鼠标悬停时的样式
a:active 鼠标被点击的样式

CSS
ul li a:link{/*默认链接时，去掉下划线，颜色为黑色，大小14*/
	color: #000000;
	text-decoration: none;
	font-size: 14 px;
}
ul li a:hover{/*鼠标经过时，字体加粗，大小16px,颜色白色*/
	font-weight: bold;
	color: #ffffff;
	text-decoration: :none;
	font-size: 16 px;
}

HTML
<body>
<ul>
	<li><a href="#">点击它</a></li>
</ul>
</body>

其他用法一样

0*..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本操作

人机交互CSS的基本操作一、CSS选择器1. 标签选择器直接在CSS中写入相应的结构代码p{ font-size = 16px; color = red;}<body> <p>修饰内容</p></body>2.类选择器也称为class选择器，可用于某一类元素 .one{ font-size:10px; } .twe{ font-size:20px; } .red{ color:red; }
复制链接

扫一扫