Web前端css基本内容

最新推荐文章于 2024-04-26 16:06:24 发布

任家伟

最新推荐文章于 2024-04-26 16:06:24 发布

阅读量405

点赞数 5

文章标签：前端 css

本文链接：https://blog.csdn.net/2301_77405161/article/details/136993233

版权

Html是网页的结构，css是网页的表现（美化），javaScript是网页的交互

概念：

概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块（用于控制网页的样式和布局，美化网页）

css导入样式：

1.直接导入，行内样式

<p style="color: red;font-size: 30px;">好好学习</p>

2.内嵌样式：

<style>
	p{
		font-size:20px;
		color：gray;
	}
</style>

虽然它可以写在html文件中，但它仍然属于css的范畴，所以不能再该代码块中不能使用html注释，只能使用css注释

3.外部样式：链接式和导入式

链接式：实现代码写在css文件中，html代码中只管引用（链接式是XHTML标签，除了加载CSS外，还可以定义RSS等其他）

h1{
     color:red
  }

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

导入式：代码位置与链接式一样（导入式属于CSS范畴，只能加载CSS）

h1{
     color:red
}

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

选择器：

标签选择器标签{}

1.标签选择器会选择这个html代码中所有这个标签（例如：a、h、p…）的元素

2.类选择器 .类名{} //类名中文，英文都可以，符号、数字都不行。最好以英文命名为主，中文命名容易出现乱码

只改类名相同的元素，可以跨标签使用，比标签选择器更灵活

//类名可以同时命名多个， class=“类名1 类名2”；

3.ID选择器 #id名{} //id名的命名与类名的命名相同

id具有全局唯一性，只能改相应id的元素

三种选择器的优先级：id选择器 > 类选择器 > 标签选择器

通配选择器选中所有的标签

*{
	font-family: 楷体;
	color: red;
	font-size: 30px;
}

选择器组合可以为多个选择器定义相同的样式表

#title,.p1,.p2,h1{
					font-family: 楷体;
					}

字体的各种属性：

		.p1{
			color:green;
			font-size:20px;
			font-family:楷体;
			font-weight:700;
			font-style:italic;
			/* text-align: right;*/
			/*text-decoration:line-through;删除线*/
			/* text-decoration:underline;下划线*/
			/* line-height:50px;行高*/
			/*letter-spacing:20px;字符距*/
			/*word-spacing:20px;单词间距*/
			text-indent:2em;//首行缩进,em指的是当前文档一个字符的大小
			}
			a{
				text-decoration: none;
			}

背景图片：

p{
				color:red;
				background-color: aqua;/* 背景颜色 */
				width:800px;
				height:600px;
				background-image:url("img/bg.jpg");/*背景图片*/
				background-repeat:no-repeat;/*控制背景图片是否重复*/
				background-position:center center;/*背景位置*/
				background-size:400px 400px;/*尺寸*/
				
			}

列表：

如果有两个列表，想把列表的内容样式进行修改，只改一个列表的话，把两个列表的li分别加上class名再进行修改很麻烦，直接给ul加上class名然后对u1，u2进行修改

.u1 li{
		text-align:center;
		color:red;
		list-style-type:none;
		list-style-image: url("img/img.jpg");
		list-style-position:inside;/*图标位置*/
		}
		</style>
	</head>
	<body>
	<ul class="u1">
	<li>列表项</li><li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	</ul>
	<ul class="u2">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	</ul>

伪类：

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

	a{
			color: gray;
			text-decoration:none;
	}
	/*当鼠标移入到标签上时,自动切换到样式表 */
	a:active{
		color:green;
		text-decoration:underline;
          /* 点击 */
	}
	p:hover{
		/* 鼠标放上 */
		color:blue;
		background-color:aqua;
	}
	p:active{
	color: white;
	background-color:blue;
	}
	input:hover{
		background-color:bisque;
	}
	input:active{
	background-color:antiquewhite;
	}
	.btn{
		border: 0px;
		background-color:beige;
		
	}
	.btn:hover{
	background-color:bisque;
	}
	.btn:active{
	background-color:antiquewhite;
	}
	/* 向拥有鼠标焦点的标签（输入框）添加样式 */
	.txt1:focus{
		background-color:aqua;
		}

透明度：

img{
		opacity:1;/*.设置标签透明度..0完全透明..1-完全不透明.*/
		}

标签:

	<!-- 块级标签:无论内容多少,都会独古一行,一般用来进行网贞布局.......可以设置宽高.width...height
		 -->
		 <p style="width:200px;blackground-color:aqua;">段落</p>段落后面内容
		 <!-- 行级标签....只占白身大小,不会古一行...设置宽高无效..主要用来对文字修饰的
		  -->
		  <b style="width:200px;background-color:.aqua;">aaa</b>.
		  <!-- 行级块，不占一行，可以设置宽高 -->
		  <input style="width:200px;"/>

div&span：

p h1这些标签虽然是块级标签，但是它们都有默认样式，会影响网页布局使用
div标签是一个块级标签，没有任何的附加样式，用来进行网页布局，给什么属性就变成什么样子
span和div同理但是是一个行级标签

任家伟

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端css基本内容

Html是网页的结构，css是网页的表现（美化），javaScript是网页的交互概念：概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块（用于控制网页的样式和布局，美化网页）css导入样式：1.直接导入，行内样式3.外部样式：链接式和导入式。
复制链接

扫一扫