css学习

最新推荐文章于 2024-07-16 17:18:30 发布

weixin_43745363

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量101

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43745363/article/details/84948566

版权

CSS学习

基础部分

CSS选择器：

派生选择器：根据上下文确定设置哪部分的样式

ul li strong{
	color: #fff;

id选择器（使用#号选择）:根据id确认被设置部分的样式，可与派生选择器组合使用

<!--html-->
<p id="green" class="content">This is a phragraph</p>

/*css*/
# green{
	color: #fff;
	}

类选择器（.）进行选择,同样可以使用派生选择器,注意多类选择器的使用。

<!--html-->
<p id="green" class="content">This is a phragraph</p>

/*css*/
.content{
	color: #fff;
	}
/* 也可使用如下选择方式
p.content{
	color: #fff;
	}
*/

多类选择器.class1.class2会选择class1和class2和class1class2中的样式

属性选择器([可参考正则表达式]):
1. [attribute=value]用于选取带有指定属性和值的元素
2. [attribute~=value]用于选取属性值中包含指定词汇的元素。
3. [attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
4. [attribute^=value]匹配属性值以指定值开头的每个元素。
5. [attribute$=value]匹配属性值以指定值结尾的每个元素。
6. [attribute*=value]匹配属性值中包含指定值的每个元素。

<!--html-->
<p id="green" class="content" title="hi">This is a phragraph</p>
<p id="green2" class="content2" title="hello">This is a phragraph2</p>

/*css*/
.[title="hi"]{
	color: #fff;
	}
//段落2不会被设置

子元素选择器：（>）标识选择某元素下的第一个元素
相邻兄弟选择器：（+）选择子元素下相邻的子元素
伪类选择器：
1. first-child：选择第一次出现该标签的元素，后续第二次重复出现的不选择

<!--例1-->
<html>
<head>
<style type="text/css">
	p:first-child i {
	  color:blue;
	  } 
</style>
</head>

<body>
	<p>some <i>text</i>. some <i>text</i>.</p>
	<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

CSS属性：

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

text

属性	参数	含义
text-align	left	把文本排列到左边。默认值：由浏览器决定
	right	把文本排列到右边。
	center	把文本排列到中间。
	justify	实现两端对齐文本效果。
	inherit	规定应该从父元素继承 text-align 属性的值。
text-indent	设置缩进
word-spacing	改变字（单词）之间的标准间隔
letter-spacing	改变字母之间的标准间隔
text-transform	none	默认。定义带有小写字母和大写字母的标准的文本。
	capitalize	文本中的每个单词以大写字母开头。
	uppercase	定义仅有大写字母。
	lowercase	定义仅有小写字母。
	inherit	规定应该从父元素继承 text-transform 属性的值。
text-decoration	none	定义标准文本
	underline	定义文本下划线
	overline	定义文本上划线。
	blink	定义闪烁文本。
	inherit	规定应该从父元素继承text-decoration属性的值。
	line-through	定义穿过文本的一条线。
white-space	normal	默认，空白被浏览器忽略
	pre	保留所有空白
	nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
	pre-wrap	保留空白符序列，但是正常地进行换行。
	pre-line	合并空白符序列，但是保留换行符。
	inherit	规定应该从父元素继承 white-space 属性的值。
direction	ltr	left-to-right
	rtl	right-to-left
	inherit	规定应该从父元素继承 white-space 属性的值。

列表
- list-style-type:

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

-  list-style-image

ul li{ list-style-image: url(xxx.png);}

表格

属性	值	含义
border-collapse	separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
	collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
	inherit	规定应该从父元素继承 border-collapse 属性的值。
border-spacing	属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式，相当一设置属性border-collapse为0时，为2倍border）。
caption-side	top	顶部
caption-side	buttom	底部
table-layout	automatic	自动调整
table-layout	fixed	表格大小被固定

浮动
- 在子集元素均为浮动的情况下，父级元素无法被撑开，解决该办法有三种：
1. 在所有元素后添加一个用于清楚浮动的div
2. 添加一个伪类:clearfix:after{{ content: ""; display: block; clear: both; }
3. 对父级元素使用overflow:hidden
- 解决对浮动元素进行居中的问题，
1. 在浮动元素外嵌套一个div对这个div进行mrgin:0 auto（宽度需要包含浮动元素）即可。
2. 父级元素向左浮动50%，子元素相对于父元素向右偏移50%


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
	.clearfix:after 
	{
		content:"";
		height:0; 
		visibility:hidden; 
		display:block; 
		clear:both;
	   }
	.clearfix { zoom:1; }
	.wrap 
	{ 
		margin:20px auto; 
		padding:10px 0; 
		background:orange; 
		overflow:hidden; 
		position:relative; }
	.inwrap
	{
		float:left; 
		position:relative;
		left:50%;}
	.page 
	{ 
		float:left; 
		position:relative; 
		left:-50%; }
	.page li 
	{ 
		float:left;
		margin:0 5px; }
	.page li a { 
		display:block;
		padding:2px 9px; 
		background:white; 
		border:1px solid red; 
		float:left;}
</style>
</head>
<body>
<div class="wrap clearfix">
	<div class="inwrap">
	<ul class="page">
		<li> <a href="#">上一页</a> </li>
		<li> <a href="#">1</a> </li>
		<li> <a href="#">2</a> </li>
		<li> <a href="#">3</a> </li>
		<li> <a href="#">4</a> </li>
		<li> <a href="#">2</a> </li>
		<li> <a href="#">3</a> </li>
		<li> <a href="#">2</a> </li>
		<li> <a href="#">3</a> </li>
		<li> <a href="#">4</a> </li>
		<li> <a href="#">5</a> </li>
		<li> <a href="#">6</a> </li>
		<li> <a href="#">下一页</a> </li>
	</ul>
</div>
</div>
</body>
</html>

css动画

使用keyframe来创建动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

将动画捆绑到相应的组件上

div
{
animation: myfirst 5s;
}

weixin_43745363

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

CSS学习基础部分CSS选择器：派生选择器：根据上下文确定设置哪部分的样式ul li strong{ color: #fff;id选择器（使用#号选择）:根据id确认被设置部分的样式，可与派生选择器组合使用&amp;lt;!--html--&amp;gt;&amp;lt;p id=&quot;green&quot; class=&quot;content&quot;&amp;gt;This
复制链接

扫一扫