美文网首页
CSS基础了解

CSS基础了解

作者: Xnzhg | 来源:发表于2016-07-20 23:37 被阅读0次

一:首先谈谈html控制样式的弊端

1.相同的样式效果,通过不同的属性来完成的

例如颜色: 2.程序的可维护性不高。少的工作完成更多的事情就可称之为可维护性高

通过css就能解决上述问题。

可以让各个元素都使用同一的样式声明,从而提高程序的可重用性和可维护性。

二:了解什么是css

css:cascading style sheet,中文层叠样式表,级联样式表,简称样式表

作用:为html元素去定义样式,可以实现内容与表现相分离。提高程序的可重用性和可维护性。

可重用性:多个元素可以使用相同的样式

可维护性:一个位置的样式改变,其他元素也可以跟着变

三:知道HTML与CSS之间的关系

HTML主要负责显示内容

CSS主要负责样式的定义

一个完整的页面=HTML+CSS

因为有些样式在html和css中都能实现,W3C建议尽量使用CSS样式取代HTML

四:学懂CSS样式表的使用方式

1.将样式定义在HTML元素中,直接写在html,不能实现内容和表现相分离,有称之为内联样式或者行内样式。

特点:只能控制某一个元素的显示效果。

语法:<标记 style=”样式属性:值;样式属性:值……”>

常用属性:

color:文本颜色,取值:表示颜色的英文单词

style=”color:red;”

红色

style=”background-color:green;”

背景绿色

style=”color:red;background-color:green;”

文本红色,背景绿色

font-size:字体大小,取值为px为单位

style=”font-size:20px”

2.内部样式表

将所有样式内容放在头部中的元素内

中添加若干”样式规则”

样式规则:对一套样式的完整描述。主要包含两部分:

1.1.哪些标记允许使用定义好的样式,叫做选择器

1.2.样式内容:若干样式声明。(样式属性和值)

样式规则语法:

选择器{样式属性:值;}

选择器的分类

1.标记选择器:通过标记的名称来表示,定义这个标记是什么样式。

div{

color:red;

font-size:48px;

}

特点:

能够实现内容与表现相分离

提升了样式的可重用性和可维护性

只能在一个页面中做通用样式定义(控制一个页面的样式)

3.外部样式表

将样式规则保存在独立的样式文件中,由页面对样式文件进行引用

特点:

能够实现内容与表现相分离

完美的体现样式的可重用性和可维护性

所有的页面的样式都能统一控制,在整个网站乃至于互联网中做通用的样式定义。

相关文章

  • CSS基础——了解CSS

    经过一段时间的学习,已经把html大部分知识撸了一遍,对于开发也算是入了个门,下一阶段的目标是学习CSS,接下来就...

  • CSS基础了解

    一:首先谈谈html控制样式的弊端 1.相同的样式效果,通过不同的属性来完成的 例如颜色: 2.程序的可维护性不高...

  • CSS布局基础

    CSS布局基础 前言 本文的阅读对象主要是针对CSS零基础的设计与测试人员,帮助学习者快速了解一些CSS基础布局,...

  • 6. 报告内容生成

    知识基础 了解Python类的基础 了解jinja2模板 了解HTML和CSS进行网页页面设置 学习目标 使用已经...

  • PHP学习路径大纲

    PHP学习路径大纲 [TOC] 入门基础 Web基础 学习HTML、CSS样式基础知识,了解各种常用标签的意义以及...

  • 【CSS非全解01】CSS基础-体系化学CSS?

    一些要先了解的 基础部分学习占比:HTML 1% CSS 19% Javascript 80% (基础部分 ?% ...

  • VUE组件开发 c-radio

    基础要求 了解VUE基本程序结构,有CSS/HTML基础。 VUE组件开发 c-radio https://www...

  • web学习之css基础教程

    一、CSS简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解:HTMLXHTML CSS 概...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

网友评论

      本文标题:CSS基础了解

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