前端知识学习一 :CSS基础

一.CSS概述

    css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中,

  把样式添加到HTML4.0中,是为了解决内容和表现分离的问题。外部样式表通常存储在css文件       中。多个样式定义可层叠为一。

二.层叠次序

    一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权。

  1.浏览器的缺省设置

  2.外部样式表(通过引入的外部.css文件)

  3.内部样式表(位于<head>标签内部)

  4.内联样式表(在HTML元素内部)

    因此属性的优先级是内联样式表中优先于内部样式表中的优先于外部样式表中的,都优先于浏览器的缺省设置。

三.CSS基础语法

    css的规则由两个主要部分构成 选择器以及一条或多条声明。

    选择器通常是你需要改变样式的HTML元素

    每条声明由一个属性和一个值组成

    属性(property)是你所希望设置的样式属性(style attribute)。每个属性有一个值,值和属性之间以:分隔。

    注意:声明要用花括号包围起来。不同的声明之间以分号隔开。

    例如:

    

    定义的就是改变h1标签的字体颜色和字体大小

    值得不同写法和单位

      例如在colr属性中,我们不仅可以使用英文单词来进行定义(red),还可以使用十六进     制的颜色值来进行定义(#ff0000)。

      为了节约字节,我们还可以使用css的缩写形式p{color:#f00}

      同时,我们还可以通过两种方式来使用RGB值(通过对红,绿,蓝三种颜色的叠加来得到各种不同的颜色)。

       1  p{ color:rgb(255,0,0) }

       2 p{ color:rgb(100%,0%,0%) }

    注意:当使用RGB百分比时,即使当值为0时,也要写百分比符号,但是在其他,例如说宽度啊,像素啊!在这些后面就不需要使用单位了。

      CSS的空格和大小写

    css对空格和大小写,不敏感,是否包含空格不会影响到css在浏览器上的工作效果,同样css对于大小写也是不敏感的。但如果涉及到和HTML文档一起工作的话 ,class和id名称对大小写是敏感的。

     

    

时间: 2024-10-12 03:50:47

前端知识学习一 :CSS基础的相关文章

做好前端的话html和css基础必须夯实

很多前端大佬说,要做好前端的话html和css基础必须夯实.那么,达到什么水平才能叫基础夯实呢? 1.拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程中可能出现的兼容问题. 2.页面在书写的时候可以快速的写出来适合该项目相关的reset.css.并且在书写布局的适合可以借助编辑器的相关快捷键和相应的标记符,迅速把某一大模块的结构书写出来,比如利用hbulider的table快捷键书写快捷结构,div>p.box$*4+p.text,并且做到一步到

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

前端知识学习步骤

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:龚一峰链接: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入门教

安全测试2_Web前端知识学习

上次讲到安全的简介,这次就来简单的讲解下基本的前端知识(html.js.css(不作讲解),牛逼的请忽略!!! 1.Html简单概述: Html和Html DOM 2.Html字符实体(借用别人的,详细可以百度了解更多字符实体): 3.了解Html常见事件属性: onerror(在错误发生时运行的脚本).onload(页面结束加载之后触发).onclick(元素上发生鼠标点击时触发).onchange(在元素值被改变时运行的脚本).onfocus(当元素获得焦点时运行的脚本).oninput(当

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,常用样式详细解读

#### CSS属性值background背景 -   背景颜色 - background-image:url(  );背景图片 - background-repeat:no-repeat; 设置背景图片是否平铺 - repeat:平铺,默认值 - no-repeat 不平铺 - background-size:100px 60px;设置图片的大小,值X/Y,可用单位百分比像素 - background-position:100px 60px;设置图片的位置,值X/Y,可用单位百分比像素,英文单

前端知识学习二 :CSS高级

一:选择器的分组 通过对多个元素进行分组,使这些在同一个组中的元素都满足相同的属性,方法而不需要进行多次定义. 但这个的不足就是只能定义共有的属性,不能定义单个的属性,但这个单个的不同属性是可以通过在优先级比较高的层级里定义,就可以定义不同的属性,也可以进行覆盖操作. 这是一个cssd的组选择器. 二:继承和组选择器 一般来说我们在父元素中定义了属性后,可以在子元素中就不再定义该属性,而是自动的继承父元素的属性,但因为有的浏览器有可能不支持这种继承.在这种情况下,我们就可以通过使用组选择器的方式

1)前端的html和css基础标签

1) 前端:html 这里使用谷歌浏览器 开发工具使用pycharm 1.HTML的概述 html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体.颜色.大小等. 注:html中,除了语义,其他什么都没有. 2.HTML的网络术语 · 网页 :由各种标记组成的一个页面就叫网页. · 主页(首页) : 一个网站的起始页面或者导航页面. · 标记: <p>称为开始标记 ,</p&

前端知识学习——html

<!-- Html,CSS,JS 三者的关系 ==> 人,衣服,动作. 以下展示 html 常用基本编码 --><!-- Html 在PyCharm中新建html文件默认给出的基本标签如下: ---------------------- <!DOCTYPE html> 表示标准的html解析格式 w3c <html lang="en"> html文档 en 英文, zh中文 <head> 页面的头,是一对主动闭合标签 <

便于iOS开发的网页前端知识学习

一.HTML 1. 何为html 页面上每一个显示的内容都是标签,整个页面都是由标签构成的,html的代码内容控制的是页面显示的内容,这些内容的代码呈现方式都是标签.标签元素是html最根本的东西. 标签,属性 -----可以通过查看www.w3school.com来学习,里面有详细的教程 标签之间的关系 : 一个标签在另一个标签的里面叫做父子关系,或者是平级的兄弟关系 标签(元素)的类型 a) 块级元素(block):独占一行,能够随意的修改尺寸 b) 行内元素(inline):多个行内元素能