码迷,mamicode.com
首页 > Web开发 > 详细

css入门

时间:2019-11-13 22:28:38      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:dex   key   实例   ref   层叠   选择器   value   问题   博客   

前端三要素:html,css,javascript,分别表示着 内容,表现,行为。一个形象的比喻:富有能动性的人的构成三要素,血肉之体(内容)+ 外形轮廓(表现)+ 行为能力(行为)。

颜值即正义的今天,越来越多的花里胡哨的页面层出不穷,这其中css就扮演了很重要的角色,虽然没有javascript来的那么让人惧怕,让人望而生畏,但也有很多需要理解和记忆的东西。

讨论一个问题,习惯性的会问三个问题:

1.是什么?

2.为什么?

3.怎么样?

答:

1. css (Cascading Style Sheets/层叠样式表)

  从名称中可以提取看出:css拥有层叠的能力,可以多张且可以叠加,用于描述样式,以表的形式存在。

  隐含的内容: css 是作用于 html,脱离了 躯体 将无处附着。

  这里就要提出几个问题了,

  多张:多张是如何在 html 中进行作用的  

  叠加:叠加又是如何解决优先级,如何处理合并,替换的问题

  表的形式存在:css 作用 html 时都有哪些存在方式

2. 简单的内容堆叠已经满足不了用户的需求,需要有一种方式去解决样式的问题。

   最先提出的方式是利用  html 中的标签,i 代表斜体,strong 代表粗体,庞杂,体积大,复用性差终将决定他不能久存,终于被 css 取代了。

3. css 声明语句的规范:

  选择器 {声明语句;...}

  声明语句可以是一条也可以是多条,每条声明语句都是以 键值对(key: value)的形式存在,每条声明语句之间用 “;” 间隔

  实例: div { font-size: 15px; color: red; }

 css 可以以内联,内部样式表和外部样式表三种方式存在并作用于 html  

  内联方式: 在标签内部,用“”对声明语句进行包裹并作为属性 style 的属性值 发挥作用。

       实例: <div style="color:red;background:green;">这叫什么江湖?</div>

  内部样式表: style标签包裹上述声明规范(一般该style标签会被放在head标签中)

        实例:<head>

            <style>

              div {

                color: red;

                background: green;

              }

            </style>

          </head>

   外部样式表:利用 link 将外部书写好的 .css 样式表引入到要作用的 html 的head中,.css 文件都是由上述声明规范的语句书写的

      实例: <link rel="stylesheet" href="./index.css">

          index.css  div{

                color: red;

                background: green;

               }

   好,大概就先说这么多,第一次写,文中的内容也是 多年积累和自我思考 获得的,定然是存在各种疏漏 或 认知错误的地方,欢迎雅正。

  博客的功能也没有完全摸索也没时间摸索,后期再加以修改吧。先看看效果。

 

  

css入门

标签:dex   key   实例   ref   层叠   选择器   value   问题   博客   

原文地址:https://www.cnblogs.com/Seaskydad/p/11853257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!