进阶CSS

最新推荐文章于 2024-07-05 14:51:32 发布

Ostrich hunter

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量79

点赞数

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

本文链接：https://blog.csdn.net/weixin_44161261/article/details/106096055

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS：（Cascading Style Sheet）

CSS：级联样式表、层叠样式表（一门用来渲染、装扮、美化页面的技术）

CSS目前主要的版本：

CSS2.x版本
CSS3.x版本：主要是为移动端

CSS的几种写法：

行内样式：简单方便，优先级别最高，不推荐使用行内样式，可以做页面微调

<div style="color: greenyellow;">这个是个div</div>

页面样式：HTML 、css做了一次分离，写的样式没有办法在多个页面上共用，违背了w3c三层分离

<style>

#msg {

                color: green;

                font-size: 30px;

            }

</style>

外联样式：将css书写在一个独立的css文件中（xxx.css），使用link标签引入，rel="stylesheet"属性不能少，href引入路径

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

CSS的选择器：

基本选择器

ID选择器（获取id为xx的标签）

类选择器（获取标签中class=xx的标签）

标签选择器（根据标签名称获取）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
			
			/* id选择器  #id名称 */
			#msg {
				color: green;
				font-size: 30px;
			}
			/* class选择器， .className  */
			.box {
				width: 300px;
				height: 200px;
				border: 1px solid red;
			}
			/* 标签选择器 */
			a {
				text-decoration: none;
				color: gray;
				font-size: 18px;
			}
			a:hover {
				color: red;
				text-decoration: underline;
			}
			/* div中使用box类的 */
			div.box {
			}
			.msg {
				background: gray;
				width: 800px;
			}
			
			
		</style>
	</head>
	<body>
		<!-- id：标签的唯一标识符 -->
		<div id="msg">这个是个div</div>
		
		<!-- 类选择器 -->
		<div class="box"></div>
		<!-- 一个标签可以有多个类选择器 -->
		<div class="box msg"></div>
		<div class="box"></div>
		
		<ul class="li"><li><a href="#">导航1</a></li></ul>
		<ul class="li"><li><a href="#">导航1</a></li></ul>
		
	</body>
</html>

通用选择器（通配符）--现在不推荐使用

* {

margin: 0px;

padding: 0;

font-size: 16px;

}

包含选择器

子代选择器(获取某个标签的第一级子标签)

后代选择器(获取某个标签中的所有的子标签)

分组选择符，也叫做逗号选择器(可以同时设定多个标签,使用逗号进行分割)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>包含选择器</title>
		<style type="text/css">
			/* 子代选择器 */
			/* .list > li {
				border: 1px dashed red;
				margin: 5px;
			} */
			
			/* 后代选择器 */
			.list li {
				border: 1px dotted red;
				width: 300px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}
			.list li>a {
				text-decoration: none;
				color: gray;
				font-size: 20px;
			}
			
		</style>
	</head>
	<body>
		<ul class="list">
			<li><a href="#">首页1</a></li>
			<li><a href="#">首页2</a></li>
			<li><a href="#">首页3</a></li>
			<li>
				<a href="#">首页10</a>
				<ul>
					<li>二级菜单1</li>
					<li>二级菜单2</li>
					<li>二级菜单3</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			/* 表示页面所有存在title属性的标签 */
			div[title] {
				background: #FF0000;
			}
			
			/* 当属性等于xx值的时候 */
			[type="text"] {
				border: none;
				background: #00FFFF;
			}
			[type="text"]:focus {
				border: none;
			}
			/* 以xx开头 */
			[type^="pass"] {
				background: blue;
			}
			/* 以xxx结束 */
			[type$="number"] {
				width: 300px;
				height: 40px;
			}
			/* 包含xx值 */
			[type*="e"] {
				width: 300px;
				height: 40px;
			}
			
			/* 表示下一个兄弟节点 */
			.sel + li {
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div class="box" title="what">这个是个div标签</div>
		<p title="">这个也是div</p>
		<hr>
		<input type="text" name="username" id="username" value="shuaigeliu" />
		<input type="password">
		<input type="number" name="" id="" value="" />
		
		<ul>
			<li>这个还是列表1</li>
			<li>这个还是列表2</li>
			<li class="sel">这个还是列表4</li>
			<li>这个还是列表5</li>
			<li>这个还是列表6</li>
		</ul>
		
	</body>
</html>

伪类选择器

同一个标签，根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类,这一-点很明确，就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

常见的状态有以下五种：

:link超链接点击之前

:visited链接被访问过之后

:hover "悬停":鼠标放到标签上的时候

:active “激活": 鼠标点击标签，但是不松手时

:focus是某个标签获得焦点时的样式(比如某个输入框获得焦点)

<style>
           /*让超链接点击之前是红色*/
           a:link{
           color :red;
           }
           / *让超链接点击之后是橙色*/
           a:visited{
           color :orange;
           }
           /*鼠标悬停，放到标签上的时候*/
           a :hover{
           color :green
           }
           /*鼠标点击链接，但是不松手的时候*/
           a :active{
           color :black;
           }

</style>

!!!!!注意:，在css中，这四种状态必须按照固定的顺序写:a:link、a:visited 、a:hover、a :active

css3提供的新式选择器(伪元素选择器)

css3提供了两个伪元素， before ，after

注意：before和after选择器必须书写content属性。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>css3的伪元素</title>
	<style type="text/css">
		/* css3提供了两个伪元素， before after */
		
		/* 伪元素 */
		.active::before {
			content: '二哈';
		}
		.active::after {
			content: '狗中彦祖';
			display: inline-block;
			width: 100px;
			height: 100px;
			background: #8B0000;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<ul class="box">
		<li>内容</li>
		<li>内容</li>
		<li class="active">内容</li>
		<li>内容</li>
		<li>内容</li>
	</ul>
</body>
</html

css基本语法

选择器{

属性:属性值;

属性:属性值;

........

}

常见css样式（简单介绍几种）

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

a { 
    /*color: rgba(255, 0, 0, .5);*/ 
    color: #333; 
    
    opacity: .5;/* 透明度的表示 */
       
    /* font-family 字体 */
    font-family: "微软雅黑"; 
   
    /*font-size: 字体大小*/
    font-size: 20px;

    /* 加粗 */
    font-weight: bold;
    
    /* 斜体 */
    /* font-style: italic; */ 
    
    /* text-align 文本对齐方式*/ 
    text-align: left; 

    /* text表示文本 */
    text-align: center;

    /* 是否有下划线 */
    text-decoration: underline;
				
    /* 字体阴影 */
    text-shadow: 2px 3px 3px green;
				
    /* 盒子阴影效果 */
    box-shadow: 5px 4px 4px green; 
				
    /* 做缩进的 */
    text-indent: 100px;
}

在css中，表示颜色有三种方式：

                1、使用单词 red、orange white black、blue 等等

                2、可以使用十六进制三原色表示方式红绿蓝   #6位

                3、rgb的函数完成 rgba  alpha：

display属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			a {
				
                                /* 将行内标签转换为块标签 */
				display: block;
				
				/* 将块标签转换为行内标签，一般不会这样使用 */
				display: inline;
				
				/* 行内块标签 */
				display: inline-block;
				
				
                                /* 隐藏元素 */
				display: none;
				
				/* 隐藏元素 */
				visibility: hidden;
			}
		</style>
	</head>
	<body>
	</body>
</html>

Ostrich hunter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进阶CSS

CSS：（Cascading Style Sheet）CSS：级联样式表、层叠样式表（一门用来渲染、装扮、美化页面的技术）CSS目前主要的版本：CSS2.x版本 CSS3.x版本：主要是为移动端CSS的几种写法：行内样式：简单方便，优先级别最高，不推荐使用行内样式，可以做页面微调页面样式：HTML 、css做了一次分离，写的样式没有办法在多个页面上共用，违背了w3c三层分离外联样式：将css书写在一个独立的css文件中（xxx.css），使用link标签引入，rel="sty..
复制链接

扫一扫