美文网首页
Html-CSS基础入门

Html-CSS基础入门

作者: 周蛋蛋 | 来源:发表于2019-08-23 18:37 被阅读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 中起作用。

相关文章

  • Html-CSS基础入门

    CSS简介 css:Cascading style sheets 样式通常存储在样式表中 为什么要使用CSS样式...

  • html-css 布局基础

    本文档回顾了在工作中常会用到的html/css的布局基础,由于很多坑只有在实际中踩到才会去总结,因此,本文也会不定...

  • HTML-CSS基础一

    HTML 软件架构 C/S:C(客户端,用户通过客户端来使用软件),S表示服务器。一般软件都是C/S架构。软件使用...

  • HTML-CSS基础二

    外边距 外边距指的是当前盒子与其它盒子之间的距离,不会影响可见框的大小,而会影响到盒子的位置。 盒子有四个方向的外...

  • HTML-CSS布局-4

    HTML-CSS布局相关元素小心得 在这里分享给大家一些HTML-CSS的相关知识,供新人学习,老人查阅,共勉。-...

  • HTML-CSS基础学习笔记

    HTML 1. HTML文件结构 称为根标签,所有的网页标签都在 中。 标签用于定义文档的头部,它是所有头部元素...

  • Python基础入门6_文件和异常

    Python 基础入门前五篇: Python 基础入门--简介和环境配置 Python基础入门_2基础语法和变量类...

  • Python 基础入门 5--面向对象

    Python 基础入门前四篇: Python 基础入门--简介和环境配置 Python基础入门_2基础语法和变量类...

  • Python 基础入门 7--编写测试用例(完)

    Python 基础入门前六篇: Python 基础入门--简介和环境配置 Python基础入门_2基础语法和变量类...

  • Python 基础入门 4--函数

    Python 基础入门前三篇: Python 基础入门--简介和环境配置 Python基础入门_2基础语法和变量类...

网友评论

      本文标题:Html-CSS基础入门

      本文链接:https://www.haomeiwen.com/subject/aqbmsctx.html