css基本语法

最新推荐文章于 2024-06-16 22:45:39 发布

小韩程序员

最新推荐文章于 2024-06-16 22:45:39 发布

阅读量124

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/aaoouuo/article/details/132068569

版权

css基本语法

css概述

1.CSS指层叠样式表
2.样式定义如何显示HTML元素
3.样式通常存储在样式表中
4.吧样式添加到HTML4.0中，是为了解决内容与表现分离的问题
5.外部样式表可以极大提高工作效率
6.外部样式表通常存储在CSS文件中
7.多个样式定义可层叠为一个

css基本样式

文档流的顺序：上左下右
行级表情：按照文档流的顺序依次排列
块级标签：独占一行

基本样式

宽：width:100px;
高：height:100px;
背景颜色：background-color:coral;

css注释

CSS注释以/开始，以/结束

css引入方式

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

内联样式表

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

css样式表优先级

就近原则
内部样式与外部样式
单一样式优先级

css中的冲突、层叠、继承

冲突
两个对同一标签属性进行设置不同样式时，就产生了冲突
层叠
设计几种不同样式在最终显示时，会将几种效果叠加显示
继承
文字相关的样式可以被继承
布局相关的样式可以被继承

CSS选择器

全局选择器

<style>
		*{
		padding:0;
		margin:0;
		}
	</style>
	</head>
	<body>
	<ul>
		<li>padding内填充</li>
		<li>margin外边框</li>
		<li>盒模型</li>
		</ul>
		</body>

标签选择器

<style>
		p{
			font-size:16px;
		}
		b{
			color:coral;
		}
	</style>
	</head>
	<body>
	<p>我是HTML中的段落标签</p>
	<b>我是HTML中的加粗标签</b>
		</body>

类选择器

<style>
		.className{
			color:coral;
		}
	</style>
	</head>
	<body>
	<b>我是HTML中的加粗标签</b>
		</body>

Id选择器

<style>
		#id{
			color:coral;
		}
	</style>
	</head>
	<body>
	<b id="id">我是HTML中的加粗标签</b>
		</body>

群组选择器

<style>
		p,
		b,{
			color:coral;
		}
	</style>
	</head>
	<body>
	<p>我是HTML中的段落标签</p>
	<b>我是HTML中的加粗标签</b>
	<span>我是HTML中的span标签</span>
		</body>

层次选择器

1.后代选择器空格
2.子代选择器 >

<style>
		#ul_1 li{
			list-style:none;
		}
		#ul_1>li{
			list-style:circle;
		}
	</style>
	</head>
	<body>
	<ul id="ul_1">
	<li>
	我是第一层的li标签
	<ul>
		<li>我是第二层的li标签</li>
		<li>我是第二层的li标签</li>
		</ul>
		</li>
		</ul>
		</body>

相邻兄弟 +

.uu+a{background-color: blue;}

通用兄弟 ~

.uu+a{background-color: blue;}

伪类选择器

/* 默认状态 */
       b+a:link{background-color: yellowgreen;}
       /* 、访问过后的状态 */
       b+a:visited{background-color: aqua;}
       /* 鼠标悬浮 */
       b+a:hover{background-color: red;}
       /* 鼠标按下 */
       b+a:active{background-color: orange;}

       /*结构伪类  */
       ul li:nth-child(3){background-color: orangered;}
       a:nth-child(4){background-color: gold;}
        ul p:nth-child(18){background-color: antiquewhite;}

小韩程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基本语法

1.CSS指层叠样式表2.样式定义如何显示HTML元素3.样式通常存储在样式表中4.吧样式添加到HTML4.0中，是为了解决内容与表现分离的问题5.外部样式表可以极大提高工作效率6.外部样式表通常存储在CSS文件中7.多个样式定义可层叠为一个。
复制链接

扫一扫