前端学习笔记（二）CSS入门

时间 2020-07-07

标签前端学习笔记 css 入门栏目 CSS 繁體版

原文原文链接

在学完HTML的基础内容以后，开始接触到CSS，发现bracket确实很是方便，快捷键ctrl+e便可打开光标所在位置的标签的css内容，很是方便进行修改。如下是CSS的基础知识笔记（尚未学到盒模型）：css

1.CSS指层叠样式表。样式一般储存在样式表中，定义如何显示HTML元素。把样式添加到HTML中，是为了解决内容与表现分离的问题。外部样式表可极大提升工做效率，一般存储在CSS文件中。多个样式定义能够层叠为一。样式表极大地提升了工做效率。它使得开发者能够同时改变站点中全部界面的布局和外观。html

2.怎么使用CSS：参考w3school HTML基础教程中的HTML CSS。外部样式表能够将样式应用到不少界面，内部样式表适用于单个文件的特别样式（在head部分中）。个别元素适用于内联样式（在某一元素的属性中）。当同一个 HTML 元素被不止一个样式定义时，通常而言，全部的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中（4）拥有最高的优先权。（若是有的属性只在低优先度的样式表中被选择器定义了，而在搞优先度的样式表中未被定义，则改属性会从低优先度的样式表中继承过来。） 1）浏览器缺省设置 2）外部样式表 3）内部样式表（位于标签内部） 4）内联样式（在 HTML 元素内部）编程

3.CSS语法分为selector和declaration。Selector能够有多个，用逗号隔开。 Selector即为要改变样式的HTML元素（例如h1）。每一个declaration由一个property和一个style attribute组成。最好每行只描述一个属性，这样可读性比较强。 CSS对大小写不敏感，除了class和id的名称之外。浏览器

4.CSS的语法有继承的原理。子元素老是从父元素继承属性。（例如，p，td，ul，ol等都是body的子元素。）旧式浏览器没法理解继承，须要从新把子元素写一遍。能够单首创建针对子元素的特殊规则，这样它就能够摆脱父元素的规则了。注：font-family最后加上sans-serif，也是为了保证可以调用这个字体族里面的字体，由于大多数计算机里都有这种字体。ide

5.派生选择器：经过上下文关系来定义某些原有元素的样式。例：布局

li strong{
    font-style: italic;
    font-weight: normal;
}
复制代码

意为将列表元素中的strong的含义由加粗变成斜体。学习

6.id选择器：使用“#”来为标有特定id的HTML元素制定特定的样式。例：字体

HTML:<p id=”red”>这个段落是红色</p>
CSS:#red {color:red}
复制代码

Id选择器常被用于创建派生选择器。一个id选择器做为派生选择器能够被使用不少次，分别针对一个id下不一样的元素。例：url

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}
复制代码

id 选择器也能够独立发挥做用：spa

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
复制代码

根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非特别地定义这个选择器所属的元素：

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
复制代码

7.类选择器：使用一个点号来表示。 CSS:

.center {text-align:cener}
复制代码

HTML:

<h1 class="center">
This heading will be center-aligned
</h1>
复制代码

和id选择器同样，类选择器也可被做为派生选择器。

.fancy td {
	color: #f60;
	background: #666;
	}
复制代码

也能够在某种元素中基于类进行选择：

td.fancy {
	color: #f60;
	background: #666;
	}
复制代码

这样，则class为fancy的单元格会变成灰色背景的橙色字，而class为fancy的其余元素，以及class不为fancy的单元格，都不会变。

8.属性选择器属性选择器在为不含class或id的表单设置样式时特别有用。能够为带有某些属性的元素（例：a带有属性href）设置格式。

[href]
{
color:red;
}
复制代码

还能够为属性为某些指定值，或是包含某些指定值的元素设置格式。指定某些值：[title=W3School] 包含某些值，由空格链接几个值：[title~=hello] 包含某些值，由连字符链接几个值：[lang|=en] （详细的属性选择器手册w3school上有）

9.CSS如何链接到HTML：在head部分中经过< link >标签连接。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
复制代码

外部样式表中不能包含任何HTML标签。单个文档须要特殊样式时，建议使用内部样式表。例如：

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

当样式只用于一个样式时，才考虑内联样式。由于这样会使表现和内容混杂在一块儿，损失掉样式表的许多优点。例如：

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

10.CSS样式 1）CSS背景：经过background-color调背景色，background-image设置背景图像。能够经过background-repeat、background-position等调节背景图像的是否重复、位置等等信息。用位置关键字肯定位置，则（上下左右中）能够同时选择两个不矛盾的同时使用，空格隔开。用百分比肯定位置，则第一个数字是水平位置，第二个数字是垂直位置。默认为 0% 0%。用px长度值肯定位置，从左上角开始算。默认为0 0。 Background-attachment属性可使背景图像相对可视区固定。

2）CSS文本：经过text相关的文本属性，能够定义文本的外观。 text-indent 属性能够继承。它也可使用各类长度单位。可正可负。 Text-align不影响元素的位置，只有元素其中的文本受影响。 Word-spacing和letter-spacing也可正可负。可以使用em和px。 text-transform：切换大小写。若是多个Text-decoration应用于同一元素，会替换而不是累积。 White-space：处理空格和换行符。（详细使用见文档） Line-height：设置行间距文本方向：只有当unicode-bidi属性设置为embed或bidi-override时，direction属性才会发挥做用。

3）CSS字体：建议在font-family规则中都提供一个通用字体系列以做为备选。例如：h1 {font-family: Georgia, serif;} 这样，在系统没有安装指定字体的状况下，依然有候选字体能够选择。或者指定一系列相似字体：

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}
复制代码

这样用户代理就会按照优先顺序进行查找，而且选出最靠前的已安装字体进行使用。若是字体名中有空格、#、$等符号，则字体名须要套引号。若是该font-family属性在HTML中，自己就有双引号，则用单引号。（或者反之） Font-style中，italic和oblique是两种不一样的斜体（italic对字母结构有略微修改）。在通常的浏览器中，两者没什么区别。在字体大小（font-size）中，默认的1em=16px。（若是父元素中font-size改变过，则按照改变后的值算便可）使用em则能够在全部浏览器中调整文本大小。不过在ie中有问题，文本会更大或更小。可用font-variant属性来使用小型大写字体。

4）CSS连接：连接有四种状态，可根据不一样状态调整连接的文本外观：

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

其余各类文本属性这里也适用。

例：作一个方框连接

<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}

a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
复制代码

5）CSS列表：list-style中只有三种属性，image，position，type。很是简单。

6）CSS表格：corder-collapse若是设为collapse，则外边框和单元格边框相邻合并，编程单线条。其余属性也较简单，使用可直接看手册。（不过属性种类较多，参见w3school的CSS属性手册。实际设计中要调整数值不少）

7）CSS轮廓：outline，属性很是简单，但属性的值较多。看手册便可。

接下来要学习CSS盒模型和定位相关知识，而后开始尝试制做静态网页啦！