CSS基础

时间:2020-08-01
本文章向大家介绍CSS基础,主要包括CSS基础使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

基础语法

1.选择器分组

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

2.继承以及子问题

通过CSS继承,子元素会继承最高的元素元素所拥有的属性

这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd

不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。

id选择器

#red {color:red;}
#green {color:green;}

派生选择器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

类选择器

.center {text-align: center}

属性选择器

只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择

[title]
{
color:red;
}
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

css背景

背景重复

background-repeat:
repeat-x
repeat-y
norepeat

背景定位

background-position:center;

center top botton right left

background-position:66% 33%;

放置在2/3 1/3

水平对齐

text-align 文字水平对齐方式

white-space处理文字里面的空白

属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

超链接

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */
text-decoration:none;

去除文本的下划线

border: 1px solid blue;

设置边框的大小 粗细 颜色

border-collapse 属性设置是否将表格边框折叠为单一边框:

color是设置文本中的颜色

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

h1 {padding: 10px 0.25em 2ex 20%;}

相对定位

移动后位置还保留着

相对定位

绝对定位

css浮动的概念

CSS高级

margin auto 平等的均分就是居中

display:inline 设置成行内元素

list-style-type:none;
filter可以设置透明图像
媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv 用于电视机类型的设备。

$flag 上一页 下一页

上一篇:axios学习

下一篇:python闭包与装饰器