前端知识 之 CSS

CSS目录

一:css介绍

二:css语法

三:css几种引入方式

四:css选择器

五:css属性相关

六:综合实例

一:css介绍

CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

二:css语法

2.1 css实例

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

三:css几种引入方式

3.1 行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

3.2 内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3.3 外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

四:css选择器

4.1 基本选择器

4.1.1 元素选择器

p {color: "red";}

  

4.1.2 ID选择器

#i1 {
  background-color: red;
}

  

4.1.3 类选择器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意:

样式类名不要用数字开头(有的浏览器不认)。

标签中的class属性如果有多个,要用空格分隔。

 

4.1.4 通用选择器

* {
  color: white;
}

五:css属性相关

六:综合实例

原文地址:https://www.cnblogs.com/twinkle-/p/10834709.html

时间: 2024-10-13 13:14:20

前端知识 之 CSS的相关文章

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端基础知识之css

前端基础知识之css   https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.   css就是修饰那些html元素的 其主要内容为两大块: 找到标签 和  修饰标签 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. cs

Web 前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

web前端知识总结

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识--做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的多,草图大家权当没看见. 在看内容之前,先看一下这个知识框架的

移动前端知识的一些总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 ?html 代码<meta name="viewport" content="w

前端知识学习步骤

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:龚一峰链接:https://www.zhihu.com/question/19862294/answer/44311692来源:知乎 css 编写规范 http://cssguidelin.es/ 前端性能优化的24种方法 http://browserdiet.com/en/ 学习js正确的方法 JS: The Right Way 很有趣的js编程教材(才出的) Eloquent JavaScript 设计师写的js入门教

web前端知识体系大全

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的

前端知识体系之入门篇总结(一)

利用国庆节时间,把前端学习的知识碎片进行了整理,希望能在前端之路继续努力. 前端是一个范围很大的概念,其领域包括在了计算系统中的方方面面,可以说所有与用户交互行为相关的程序开发工作都是前端的范围,这包括一个数字仪表的显示设计或者一个手机APP.通常意义上讲,前端指的是Web前端的开发工作,而学习前端也是从Web前端知识开始的. 这篇blog面向对前端没有入门或者已经有一定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者,其要旨是整理一个普通网页开发过程中所能用到的知识点.与其它类似的教程