CSS基础

最新推荐文章于 2024-10-13 21:19:12 发布

Alan_Redsheep

最新推荐文章于 2024-10-13 21:19:12 发布

阅读量201

点赞数

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

本文链接：https://blog.csdn.net/weixin_38055979/article/details/85953863

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（GSML的一个应用）或XML（DSML的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，拥有对网页对象和模型样式编辑的能力。

基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
CSS 对大小和空格不敏感。不过存在例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。不要在属性值与单位之间留有空格。

CSS选择器

标记选择器

<head>
<meta charset="UTF-8">
<title>CSS引入</title>
<style type="text/css">
	p{
		font-size: 20px;
		color: red;
	}
</style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</body>

类别选择器

<style type="text/css">
	.r{
		color: red;
		font-size: 20px;	
	}
	.b{
		color: blue;
		font-size: 20px;	
	}
</style>
</head>
<body>
<p class="r">段落一</p>
<p class="b">段落二</p>
<p class="b">段落三</p>
</body>

ID选择器

<style type="text/css">
	#p1{
		color: red;
		font-size: 20px;	
	}
	#p2{
		color: blue;
		font-size: 20px;	
	}
</style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落二</p>
</body>

CSS创建

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

//.html，链接式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

//.css
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

//.html，导入式
<head>
<style type="text/css">
	@import url(mystyle.css)
</style>
</head>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

当样式仅需要在一个元素上应用一次时，要使用内联样式。
Style 属性可以包含任何 CSS 属性

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

//内部样式
h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

//外部样式
h3 {
  text-align: right; 
  font-size: 20pt;
  }

//最终结果，内部被继承，可被外部重写覆盖
h3 {
color: red; 
text-align: right; 
font-size: 20pt;
 }

优先级规律：按顺序读取，后面读取的样式会覆盖前面的样式，形成最终的效果

CSS样式

背景

background-color: gray;
padding: 20px;
background-image: url(urlPath);
background-repeat: repeat-y;

属性值 repeat 导致图像在水平垂直方向上都平铺，
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，
no-repeat 则不允许图像在任何方向上平铺。

background-position:center;

postion可以使用两个百分比来表示图像的位置，50% 50% 表示居中

background-attachment:fixed

图像滚动与否，默认scroll

文本

text-indent: 5em;

所有元素的第一行都可以缩进一个给定的长度，可以是负值、百分比。
使用负值时，经常配合padding-left使用，防止文本超过浏览器边界。

p {text-indent: -5em; padding-left: 5em;}

text-align: justify;

在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

word-spacing: 30px;
letter-spacing: -0.5em;
text-transform: uppercase;

uppercase 和 lowercase 将文本转换为全大写和全小写字符，capitalize 只对每个单词的首字母大写。

text-decoration:underline;

underline 会对元素加下划线，overline 会在文本的顶端画一个上划线，line-through 则在文本中间画一个贯穿线，blink 会让文本闪烁。

white-space: normal;

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

direction:ltr;

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

字体

font-family: Georgia, serif;

建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。
5 种通用字体系列：Serif 字体，Sans-serif 字体，Monospace 字体，Cursive 字体，Fantasy 字体

font-style:normal;

normal - 文本正常显示，italic - 文本斜体显示，oblique - 文本倾斜显示
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样

font-variant:small-caps;设定小型大写字母
font-weight:bold;

bold 关键字可以将文本设置为粗体，100 ~ 900 为字体指定了 9 级加粗度，400 等价于 normal，而 700 等价于 bold。bolder设置比所继承值更粗的一个字体加粗。

font-size:100%;

普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
1em 等于当前的字体尺寸。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

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

当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
还有color, font-family, background, text-decoration等属性

列表
list-style-type : square

列表项标志，square方块，circle空心圆，upper-roman罗马数字，lower-alpha 小写字母，decimal数字，disc实心圆（默认）

list-style-image : url(xxx.gif)

对各标志使用一个图像

list-style-position: inside;

标志出现在列表项内容之外inside还是内容内部outside

表格
width: 100%;
height: 50px;
border-collapse: collapse;//设置是否将表格边框折叠为单一边框，collapse为边框合一，separate为边框分离。
border: 1px solid black;
text-align:right;
vertical-align:bottom;//设置垂直对齐方式
padding:15px;
background-color:green;//背景颜色
color:white;//边框颜色
table-layout :auto//表格宽度自动适应，fixed则是固定宽度，表格内容可能超出表格
轮廓
outline-color:#00ff00;
outline-width:5px;
outline-style:dotted;

值	说明
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。

CSS Box Model框（盒）模型

概述

#box {
  width: 70px;
  margin: 10px;//默认是0
  padding: 5px;//默认是0
}

内边距padding
padding: 10px 0.25em 2ex 20%;
边框border
border-style: solid dotted dashed double;
border-width: thick 5px 0.1em;
border-color: blue rgb(25%,35%,45%) #909090 red;

border-color一次可以接受最多 4 个颜色值,，分别对应上-右-下-左边框的颜色。
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同，可以继承。
transparent为透明边框，实现有厚度的透明边框。

外边距margin

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em，也可以是相对于width的百分比。
可以分别设置上-右-下-左的外边距。

p {margin: 0.5em 1em;}
//上0.5em，右1em，下跟上对称是0.5em，左跟右对称式1em。

值复制：当个性化复制时，按照上右下左（4个），左右对称（3个），上下对称（2个）。

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

定位

定位允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

postion属性

值	说明
static	默认。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative	元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute	元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身（即浏览器）。

定位机制

普通流、浮动和绝对定位。

相对定位

通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

绝对定位

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

在这里插入图片描述

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

在这里插入图片描述

float:right;//设置向右浮动
clear:both;//设置两边不能出现浮动元素
z-index:0;//页面的上下位置，值较大的覆盖值较小的。
display:inline;//把元素定义为内联元素，block为块级元素，none为不可见。

选择器

元素选择器

html {color:black;}
p {color:gray;}
h2 {color:silver;}

类型选择器

//.html
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
//.css
note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }

to
  {
  font-size:28px;
  display: block;
  }

from
  {
  font-size:28px;
  display: block;
  }

heading
  {
  color: red;
  font-size:60px;
  display: block;
  }

body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

分组选择器
h1, h2, h3, h4, h5, h6 {color:blue;}
通配符选择器
* {color:red;}
类选择器

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

.important {color:red;}
p.important {color:red;}
h1.important {color:blue;}

多类选择器

<p class="important warning">
This paragraph is a very important warning.
</p>

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

ID 选择器

HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

属性选择器

根据元素的属性及属性值来选择元素。

*[title] {color:red;}//把包含标题（title）的所有元素变为红色

a[href][title] {color:red;}
//将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
//可以把多个属性-值选择器链接在一起来选择一个文档

p[class~="important"] {color: red;}
//选择 class 属性中包含 important 的元素

img[title~="Figure"] {border: 1px solid gray;}
//选择 title 文本包含 "Figure" 的所有图像

子串匹配属性选择器

类型	描述
[abc^=“def”]	选择属性值以 “def” 开头的所有元素
[abc$=“def”]	选择属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择属性值包含子串 “def” 的所有元素
[abc \|=“en”]	选择属性值等于 en 或以 en- 开头的所有元素

后代选择器

h1 em {color:red;}
//只对 h1 元素中的 em 元素应用样式

子元素选择器

h1 > strong {color:red;}
//选择只作为 h1 元素子元素的 strong 元素

相邻兄弟选择器

h1 + p {margin-top:50px;}
//选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

伪类

selector : pseudo-class {property: value}

a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

:first-child 伪类来选择元素的第一个子元素。

//选择器匹配所有 <p> 元素中的第一个 <i> 元素：
<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</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>

在这里插入图片描述

<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>

在这里插入图片描述

:lang 伪类使你有能力为不同的语言定义特殊的规则

//:lang 类为属性值为 no 的 q 元素定义引号的类型
<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪元素

:first-line 伪元素用于向文本的首行设置特殊样式。

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

:first-letter 伪元素用于向文本的首字母设置特殊样式。
:before 伪元素可以在元素的内容前面插入新内容。
:after 伪元素可以在元素的内容之后插入新内容。

高级特性

对齐

margin

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

position

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

float

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

尺寸

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

分类属性

分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

导航栏

导航栏基本上是一个链接列表。

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;//点击和激活变为红色
}

</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

图片库

<!doctype html>
<html>
<head>
<style>
div.img
  {
  margin:3px;
  border:1px solid #bebebe;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #bebebe;
  }
div.img a:hover img
  {
  border:1px solid #333333;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:150px;
  font-size:12px;
  margin:10px 5px 10px 5px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="/i/tulip_ballade.jpg">
  <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_flaming_club.jpg">
  <img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_fringed_family.jpg">
  <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_peach_blossom.jpg">
  <img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

</body>
</html>

图片透明

img
{
opacity:0.4;
filter:alpha(opacity=40); //设置透明度
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}

媒介类型

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

<html>
<head>

<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>

</head>

<body>....</body>

</html>