css hover 控制其他元素_CSS学习小结

最新推荐文章于 2023-02-13 22:04:46 发布

weixin_39563823

最新推荐文章于 2023-02-13 22:04:46 发布

阅读量792

点赞数

css语法

Selector      Dcclaration
Selector  {Property: Value;}

CSS注释

/*  注释  */

CSS Selector(选择器)

id  &  class
id        #id
class   .class

插入样式表

外部样式表
<head> 
<link rel="stylesheet" type="text/css" href="*****.css"> 
</head>
内部样式表
<head>
<style>
Selector  {Property: Value;}
</style>
</head>
内联样式表
<p style="Property: Value;">这是一个段落。</p>

CSS Background背景

简写属性时，属性值的顺序为：
background-color              背景色
background-image            背景图片
background-repeat            背景图方向重复
background-attachment   是否随页面滚动
background-position         位置定位

CSS Text 文本

color	设置文本颜色 
direction	设置文本方向。 
letter-spacing	设置字符间距 
line-height	设置行高 
text-align	对齐元素中的文本 
text-decoration	向文本添加修饰 
text-indent	缩进元素中文本的首行 
text-shadow	设置文本阴影 
text-transform	控制元素中的字母 
unicode-bidi	设置或返回文本是否被重写  
vertical-align	设置元素的垂直对齐 
white-space	设置元素中空白的处理方式 
word-spacing	设置字间距

CSS Fonts字体属性

font	        在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

CSS 链接

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

CSS ul列表属性

list-style	        简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	        设置列表项标志的类型。

CSS Table 表格

border              指定CSS表格边框
border-collapse    折叠边框,设置表格的边框是否被折叠成一个单一的边框或隔开
Width height       定义表格的宽度和高度。
text-align         设置水平对齐方式，像左，右，或中心：

CSS 盒子模型

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>

CSS Positioning(定位)

CSS Float (浮动)

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

CSS 水平对齐(Horizontal Align)

中心对齐,使用margin属性,块元素可以把左，右页边距设置为"自动"对齐。
使用position属性设置左，右对齐,元素对齐的方法之一是使用绝对定位：
使用float属性设置左，右对齐
使用Padding设置垂直居中对齐

CSS伪类/元素

选择器	        示例	        示例说明
:link	        a:link	        选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	        a:active	选择正在活动链接
:hover	        a:hover	        把鼠标放在链接上的状态
:focus	        input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	        p:before	在每个<p>元素之前插入内容
:after	        p:after	        在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

CSS 导航条www.w3school.com.cn CSS 图片库www.w3school.com.cn