Html-CSS基础入门

2019-08-23 本文已影响0人周蛋蛋

CSS简介

css:Cascading style sheets 样式通常存储在样式表中

为什么要使用CSS
样式定义如何显示HTML元素
是为了解决内容与表现分离的问题
主要目的：可以让相同的一个页面子在不同的浏览器中显示相同的样式
什么是内容？
内容主要指HTMl中的元素
什么是表现?
表现主要指内容在浏览器中呈现的杨样式

样式解决了一个很大的问题

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

Css基础语法

image.png

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性:

p
{
color:red;
text-align:center;
}

CSS规则：div(选择器)

css元素和html元素并没有关联，而是通过div（选择器）进行关联
选择q就是定位元素中的

CSS Id 和 Class

id 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":

#para1
{
    text-align:center;
    color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。