CSS快速入门

CSS语法

hi{color:red;front-size:12px;}

在上面的CSS代码中：

h1 是选择器
{color:red;front-size:12px;} 是声明
color是属性名称
red是属性值
color:red; 被称为一个声明

demo:

<html>
	<head>
  <style type="text/css">
  	p{
      color:red;
      text-align:center;
    }
  </style>
  </head>
	<body>
		<p>Hello World</p>
	</body>
</html>

CSS包含

内联样式(不推荐使用)

<!DOCTYPE HTML>
<html>
<body>
   <a href="https://www.w3cschool.cn"  
      style="background-color:grey; color:white"> 
      Visit the website
   </a>
   <p>This is a test.</p>
   <a href="https://www.w3.org">Visit the W3C website</a>
</body>
</html>

嵌入式样式(不推荐使用)

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
    background-color:grey;
    color:white
}
</style>
</head>
    <body>
        <a href="https://www.w3cschool.cn">Visit the website</a>
        <p>This is a test.</p>
        <a href="https://www.w3.org">Visit the W3C website</a>
    </body>
</html>

外部样式表

方式一：创建具有.css文件扩展名的单独的样式表文件，并在每个HTML页面中定义相同的样式集。
styles.css:

a  {
    background-color:grey;
    color:white
}
span  {
    border: thin  black solid;
    padding:  10px;
}

demo.html:

<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
    <a href="https://www.baidu.cn">百度</a>
    <p>I like <span>books</span> and speed.</p>
</body>
</html>

方式二：使用 @import 语句，@import语句必须出现在样式表的顶部，在定义任何新样式之前
combined.css：

@import "styles.css";
span  {
    border: medium black dashed;
    padding:  10px;
}

<!DOCTYPE HTML>
<html>
    <head>
       <link rel="stylesheet"  type="text/css"  href="combined.css"/>
    </head>
    <body>
        <a href="https://www.baidu.cn">百度</a>
    		<p>I like <span>books</span> and speed.</p>
    </body>
</html>

CSS字符编码

在CSS样式表中的@import语句之前，只有一个@charset语句。
@charset语句指定样式表使用的字符编码。

@charset  "UTF-8";
@import "styles.css";
span  {
    border: medium black dashed;
    padding:  10px;
}

CSS样式级联

浏览器使用以下顺序查找属性值。

内联样式 - 使用元素上的style全局属性定义的样式
嵌入式样式 - 在样式元素中定义的样式
外部样式 - 使用链接元素导入的样式
用户样式 - 已由用户定义的样式（内联样式，嵌入样式和样式表）
浏览器样式 - 浏览器应用的默认样式

重要样式：
可以用 !important ，可以将单个标记作为重要。会把优先级调到最高，覆盖掉其他的样式。

a  {
   color:  black !important;
}

继承：
如果浏览器找不到一个可用样式中的值，它将使用继承。
继承意味着获取由父元素定义的属性的值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;
}
</style>
</head>
<body>
    <a href="https://www.baidu.cn">baidu</a>
    <p>This is a <span>test</span>.</p>
</body>
</html>

span元素的父代是p元素。
span元素从父p元素继承color属性。
不是所有的CSS属性都是继承的。
只有与外观相关的是继承的，包括文本颜色，字体详细信息等。
与布局相关的不是继承。

强制继承inherit关键字
inherit显式地告诉浏览器对属性使用父元素的值.

<!DOCTYPE HTML>
<html>
  <meta charset="UTF-8">
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;
}
span  {
    border: inherit;
}
</style>
</head>
<body>
    <a href="https://www.baidu.cn">百度</a>
    <p>This is a <span>demo</span> from yuque.</p>
    <a href="https://www.yuque.com">语雀</a>
</body>
</html>

CSS基本样式

CSS选择器

CSS选择器可以基于其id,类，类型，属性，属性值等选择HTML元素。

元素选择器

a {
  border: thin black solid;
  padding: 4px;
}

ID选择器

#myid{
	border: thin black solid;
  padding: 4px;
}

class选择器

.class1 {
  border: thin black solid;
  padding: 2px;
}

或

span.class1 {
  border: thin black solid;
  padding: 2px;
}

分组选择器

h1,h2,p{
	text-align:center;
  color:green;
}

CSS背景

属性	描述	属性值（例子）
background-color	元素背景色	background-color：lightgray;
background-image	背景图	background-image: url('/images/img_flowers.jpg')
background-repeat	背景图像的重复样式	- repeat(默认) - repeat-x - repeat-y - no-repeat - inherit
background-size	背景图像大小	background-size：50px 50px;
background-position	背景图像其实位置	left top left center left bottom right top right center right bottom center top center center center bottom -------------- x% y% -------------- xpos ypos（指定像素值，例：（0px 10px)） -------------- inherit:指定background-position属性设置应该从父元素继承
background-attachment	修复或滚动背景图像与页面的其余部分	- scroll 背景图片随页面的其余部分滚动。(默认) - fixed 背景图像固定 - inherit 指定background-attachment的设置应该从父元素继承 - local 背景图片随滚动元素滚动
background-clip	设置背景的绘制区域	- border-box （默认） - padding-box - content-box
background-origin	设置背景图像定位	- padding-box:背景图像填充框的相对位置 - border-box:背景图像边界框的相对位置 - content-box:背景图像的相对位置的内容框
background	背景属性在一个声明

CSS文本

属性	描述
letter-spacing	设置文本中字符之间的间距
tab-size	设置制表符char大小
word-break	为非CJK脚本设置换行规则
word-spacing	设置文本中单词之间的空格
word-warp	允许长的内容可以自动换行
text-align-last	最后一行如何对齐
text-align	文本的水平对齐
text-decoration-color	设置文本修饰的颜色
text-decoration-line	设置文本修饰的线条样式
text-decoration-style	集修饰样式
text-indent	设置文本缩进大小
text-justify	设置对齐方式
text-overflow	设置溢出内容的操作
text-shadow	将阴影添加到文本
text-transform	设置文本的大小写

CSS字体

属性	描述
font-face	从web加载字体
font-family	设置文本的字体系列
font-size-adjust	设置在发生字体回退时文本的可读性
font-size	设置文本的字体大小
font-stretch	为字体系列选择正常，浓缩或展开的面
font-style	设置文本的字体样式
font-variant	设置为使用小写字体
font-weight	设置字体的粗细
font	字体的简写属性

CSS链接

链接状态样式：
除了正常的样式之外，锚链接也可以基于其状态来设置样式。
四个链接状态是：

a:link - 未访问的链接
a:visited - 已访问的链接
a:hover - 一个悬停（mouses over it）链接。
a:active - 链接正在点击

前端学习系列笔记--CSS