美文网首页
CSS之基础篇

CSS之基础篇

作者: 忆往昔Code | 来源:发表于2018-08-30 22:56 被阅读0次

                                 css基础

1:缩写方法:p{ color : #ff0000}===> p {color : #foo}。

2:两种方法实现rgb p{color : rgb(255,0,0);}==>p{color: rgb(100%,0%,0%)}

3:若干单词需要加引号 p{font-family: "snas serif"}

4:每行结束加分号。   p {

  text-align: center;

  color: black;

  font-family: arial;

}

5:单独css对大小写不敏感,但是和html一起工作涉及class和id名称大小是敏感的。

6:选择器分组:h1,h2,h3,h4,h5,h6{ color: green; } 同时命名标题都是一种颜色。

7:id 选择器id 选择器以 "#" 来定义。

#red{color:red;}

#green{color:green;}

html中 <p id = "red">这个段落是红色。</p>

8:CSS 类选择器   .center{text-align: center}

html中 <h1 class = "center">

         This heading will be center-aligned

          </h1>

和 id 一样,class 也可被用作派生选择器:.fancy td{color: #f60;background: #666;}

元素也可以基于它们的类而被选择:td.fancy{color: #f60;background: #666;}

9:CSS 属性选择器-对带有指定属性的 HTML 元素设置样式。

10:外部样式表   浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

<head>

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

</head>

内部样式表 

hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}<head>

<style type = "text/css">

p{margin-left:20px;}

body{background-image:url("images/backs......gif");}

</style>

</head>

内联样式

<p style = "color: sienna;margin-left:20px">

This is a paragraph

</p>

11:即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。以内部样式为主。

hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}

相关文章

  • CSS教程汇总

    CSS揭秘实用技巧总结 不止于 CSS 灵活运用CSS开发技巧 前端基础篇之CSS世界 你未必知道的49个CSS知...

  • CSS之基础篇

    css基础 1:缩写方法:p{ color : #ff0000}===> p {c...

  • CSS学习资源

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

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

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

  • 3-CSS Introduction

    上一篇 HTML Introduction,介绍了简单的HTML入门基础。本章节是简单介绍了解 CSS 。 在此之...

  • 前端知识之CSS内容

    前端基础之CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML...

  • HTML+CSS复习之CSS基础篇

    内容简述 关于CSS,确实太繁杂了,内容多。写好不易,基本上就这个调了。大家肯定听过CSS奇淫技巧吧,关于这个我还...

  • 前端基础篇之CSS世界

    我想你每天写css代码有时候也会觉得很痛苦:这个布局的css怎么这么难实现!我也经常会有这种感觉,一个看似简单的布...

  • CSS基础篇

    什么是 CSS? SS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML...

  • 好程序员web前端培训之CSS基础知识之position

    好程序员web前端培训之CSS基础知识之position CSS定位机制 标准文档流(Normal flow) 浮...

网友评论

      本文标题:CSS之基础篇

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