css层叠样式表(二)

最新推荐文章于 2023-01-04 11:57:45 发布

zxl2029

最新推荐文章于 2023-01-04 11:57:45 发布

阅读量72

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zxl2029/article/details/117887375

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

emmet语法

概述
快速生成HTML和css的语法，提高开发效率。

快速生成标签

emmet语法	描述
div +tab键	生成标签
div*3 +tab键	快速生成3个div标签
ul>li +tab键	生成父子级标签，ul包含li
div+p +tab键	生成兄弟关系标签，div和p标签
p.red +tab键 p#one +tab键	生成带类名和id名的标签，<p class=“red”></p>
p.test$*5 +tab键	生成5个带类属性的p标签并且类名递增，<p class=“test1”><p class=“test2”>
p{你好} +tab键	生成有内容体的p标签，{}中的内容就是内容体

快速生成css语法

emmet语法描述
w +tab键生成width
h +tab键生成height
tac +tab键生成text-align: center
首字母简写的形式快速生成css语句

emmet语法	描述
w +tab键	生成width
h +tab键	生成height
tac +tab键	生成text-align: center

复合选择器

概述
复合选择器就是基础选择器进行组合。

复合选择器	描述	格式
包含选择器	选中父标元素的子元素	空格隔开 .nav a{样式语句}
子选择器	选择最近一级元素	大于号隔开 .nav>a{样式语句}
并集选择器	选择多个相同样式的元素	逗号隔开 .nav,p{样式语句}
链接伪类选择器	选择不同状态的链接	a:hover{样式语句}
intpu:focus	选择获得焦点的表单	input:focus{样式语句}

包含选择器
可以精确选择出父标签里面的子标签。

/*格式：元素1 元素2 {样式语句}*/
<head>
    <title>Document</title>
    <style>
        ul li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ol>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ol>
</body>
---*---
结果：
ul中的li颜色变为红色,ol中的li没有变色

注意：1.可以是任意继承选择器;2.选择器间用空格隔开;

亲子选择器
可以选择出父标签最近一级的子标签。

/*格式：元素1>元素2 {样式语句}*/
<head>
    <title>Document</title>
    <style>
        div>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">儿子</a>
        <p><a href="#">孙子</a></p>
    </div>
</body>
---*---
结果：div中a儿子变为红色，div中p中的a没有变色

注意：1.可以是任意继承选择器;2.选择器间用大于号隔开;

并集选择器
可以选中多组标签。

<head>
    <title>Document</title>
    <style>
        div,
        p,
        .no li {
            color: red;
        }
    </style>
</head>
<body>
    <div>1</div>
    <p>2</p>
    <ul class="no">
        <li>5</li>
        <li>5</li>
        <li>5</li>
    </ul>
</body>
---*---
结果：div、p、和ul中的li都变成红色

注意：1.可以是任意继承选择器;2.选择器间用逗号隔开;

伪类选择器
1. 链接伪类选择器：
  a:link         选择所有未被访问的链接
  a:visited     选择已被访问的链接
  a:hover      选择鼠标指针悬停的链接
  a:active      选择鼠标按下未松开的链接
```
/*实际场景，设置一个默认状态一个悬停状态*/
a {
color: #333;
text-decoration: none;
}
a:hover {
	color: #369;
	text-decoration: underline;
}
```
  注意：声明顺序使用LVHA，链接需要单独指定样式；
2. 表单伪类选择器：
  选择获得光标的表单元素(选中状态的文本框)
```
input:focus {
	background-color: chartreuse;
	color: cornflowerblue;
}
```

元素显示模式

概述
元素标签以什么方式进行显示，独占一行还是一行可以放多个。所以一般分为块元素和行内元素。

元素模式	排列方式	默认宽度	包含
块级元素	元素独占一行	宽度为容器的100%，可以设置宽高	容器可以包含任何标签
行内元素	一行多个	宽度为内容的宽度，不可以直接设置宽高	容纳文本或其他行内元素
行内块元素	一行多个	宽度为内容的宽度，但可以设置宽高

块元素的显示特点：(p h div ul ol li)等元素标签
1. 独占一行
2. 宽高、外边距和内边距都可以控制
3. 宽度默认是容器(父级宽度)的100%
4. 可看做一个容器或盒子，可以放行内元素和块级元素
  注意：文字类的元素标签内不能使用块级元素，例如 p h 中不能使用div。
行内元素的特点：(a strong b em i del ins span)等元素标签
1. 一行可以显示多个
2. 宽高设置无效，水平方向的padding和margin属性可以设置，单垂直方向无效。
3. 默认宽度是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素
  注意：链接里面不能再放链接，特别情况a可以放块级元素，但最好转化一下块级模式。
行内块元素特点：(img input td)元素标签
1. 一行可以放多个，但中间会有缝隙。（一行多个行内元素特点）
2. 默认宽度就是它本身内容宽度。（行内元素特点）
3. 高度、行高、外边距和内边距都可以控制。（块级元素特点）
元素显示模式设置
设为块级元素显示：display:block;
设为行内元素显示：display:inline;
设为行内块显示：display:inline-block

css背景

概述
设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

属性	作用	值
background-color	背景颜色	十六进制 / RGB代码 / 预定义颜色值
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x / repeat-y
background-position	背景图位置	像素 / 百分比 / 2em / left
background-attachment	背景附着	scroll(背景滚动) / fixed(背景固定)
背景简写	节约代码	色-图-铺-附-定
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3) 红绿蓝透明度

设置背景颜色
设置盒子背景颜色。
格式：background-color: 颜色值;（默认值：transparent透明）
```
div {
	width: 100px;
	height: 100px;
	background-color: pink;
}
```

背景图片
常用于logo、装饰小图片或者超大的背景图片，可以精确控制位置（精灵图）。
格式：background-image: url(图片地址);（noen没有背景图）

/* 默认平铺整个盒子 */
div {
	width: 100px;
	height: 100px;
	background-image: url(demo/images/1.jpg);
}


/* 设置不平铺：background-repeat: no-repeat;  */
	div {
	width: 100px;
	height: 100px;
	background-image: url(demo/images/1.jpg);
	background-repeat: no-repeat;/*repeat 丨 no-repeat 丨 repeat-x 丨 repeat-y*/
	
}

注意：可以同时添加背景图片和背景颜色，背景图片会显示在背景颜色上层。

背景图片位置
属性格式：background-position: x y;（x,y可以是像素、百分比、方位名词和2em，并且可以混合使用）

div {
	width: 600px;
	height: 300px;
	background-image: url(demo/images/2.png);/*图片url*/
	background-repeat: no-repeat;			/*图片不平铺*/
	background-color: pink;					/*背景颜色*/
	background-position: 50% 5em;			/*图片位置*/
}

背景图像固定(背景附着)
属性格式：background-attachment: scroll（不固定：scroll 背景图片固定：fixed）

body {
	background-image: url(demo/images/bj.jpg);	/*背景图*/
	background-repeat: no-repeat;				/*不平铺*/
	background-position: center top;			/*背景图位置*/
	background-attachment: fixed;				/*背景图固定*/
}

可以制作视差滚动效果，背景图不动，其他元素在滚动。

背景复合写法
复合格式：background: 背景颜色背景图片背景平铺背景图片滚动背景图片位置（色-图-复-着-位）
```
body {
	background: #000 url(demo/images/2.png) no-repeat scroll  center;
}
```
背景色半透明
属性格式：background:raba(0,0,0,0.3)
```
h2 {
	background: rgba(33,33,33,0.3);/*参数对应：红绿蓝 透明度(0~1)*/
}
```
注意：仅盒子背景色半透明，内容正常显示。最后一个参数常用：.3 这样的写法。

zxl2029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css层叠样式表(二)

emmet语法概述快速生成HTML和css的语法，提高开发效率。快速生成标签emmet语法描述div +tab键生成标签div*3 +tab键快速生成3个div标签ul>li +tab键生成父子级标签，ul包含lidiv+p +tab键生成兄弟关系标签，div和p标签p.red +tab键p#one +tab键生成带类名和id名的标签，<p class=“red”></p>p.test$*5 +tab键
复制链接

扫一扫