CSS(Cascading Style Sheets)层叠样式表

含义

一种计算机语言;

能够实现网页与内容分离;

用来表现文件样式,如HTML或XML;

比較

div与css

假设说div是容器的话,那么css就是装饰或是表现容器样式的事物。比方div是盒子,那么css的作用就是表示盒子的颜色,大小,体积等。

html与css

html是负责网页内容的;css是负责网页样式的,并且css非常好的解耦网页的内容和样式。

选择器

设置选择器之后,我们就能够设置CSS样式了。

那不设选择器行不行呢?能够在word中类比一下,我们就能够把文章中每段或每行的文字都设成一个独有的样式,这个样式能够包含font-size(字体大小),width,height等等。

CSS中的选择器能够分为id选择器,class选择器和Html选择器。

1)、id选择器

能够为标有特定id的HTML元素制定特定的样式,以“#”来定义。

#newnews {
/*最新新闻框架*/
font-size :20px;
margin-left :5px;
margin-bottom :10px;
}

2)、class选择器

用来描写叙述一组元素的样式,可在多元素中使用,以一个点"."号显示。

.replay {
margin-bottom :30px;/*底部的外边距*/
}

3)、html标签选择器

没有标识,直接引用

用法

看了前面的这两个样例,有人肯定会有这种疑惑:我们为newnews,replay设置了样式,那在网页上他们是怎么使用的呢?

接下来,我们就讲一下定义网页的方法

1)、外部:将网页链接到外部样式表。

2)、内页:在网页上创建嵌入的样式表。

3)、行内:一个用内嵌样式到各个网页元素。

第一种:-->写在css文件里

在其它网页上使用同样的样式时,或为了保持网页的外观一致总体性,能够採用外部样式。外部样式更改也十分方便。

<link href="../css/login.css" rel="stylesheet"  type="text/css" />
<!--外部样式表即login.css-->

另外一种:-->写在head头部

当我们仅仅要定义当前网页的样式事,可採用嵌入的样式表。它“嵌”在网页的 <HEAD>
标记符内。

<head>
<title>页面标题</title>
<styletype="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>

第三种:-->在html中

当特殊的样式须要应用到个别元素时。使用内联样式的方法是在相关的标签中使用样式属性。

<p style="color: black; margin-left: 20px">
这里是文字!
</p>

CSS看似是一个新东西,但仅仅要动手去实践,就会发现,它的非常多知识都是之前接触到的。比方设置字体、行间距等等,要多多尝试。

      介绍了CSS的概念和几种用法后,下篇博客主要讲的是CSS的核心内容。

CSS——(1)基础的更多相关文章

  1. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. 【笔记-前端】div+css排版基础,以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. CSS 设计彻底研究(一)(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  5. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  6. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  7. 第六十九节,css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  8. 【CSS入门基础,有需要的看过来哦】心境,心静,不轻言放弃!---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  9. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  10. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

随机推荐

  1. 关于谷歌浏览器下自动填写密码的bug

    有的时候我们需要用到h5中input的新类型,type=password 这个可以很好的将输入的内容变成圆点,但是这样做也有一个小bug就是在某些我们不希望自动保存密码的页面中,也会出现浏览器自动帮我 ...

  2. Amazon's NoSQL Journey and AWS Operations

    AWS: Amazon Web Services 提供了一整套基础设施和应用程序服务,使您几乎能够在云中运行一切应用程序:从企业应用程序和大数据项目,到社交游戏和移动应用程序. 计算类: EC2:弹性 ...

  3. caffe---测试模型分类结果并输出(python )

    当训练好一个model之后,我们通常会根据这个model最终的loss和在验证集上的accuracy来判断它的好坏.但是,对于分类问题,我们如果只是知道整体的分类正确率 显然还不够,所以只有知道模型对 ...

  4. css详解笔记

    CSS中的块级元素与行内元素 块级元素特性: 1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示. 2.内联元素特性: 3.和其他内联元素显示在同一行. 块级元素列举如下: div(文档分区 ...

  5. js烟花特效

    <!DOCTYPE html><html><head><style>body{background:#000;margin:0;}canvas{curs ...

  6. LightOj_1342 Aladdin and the Magical Sticks

    题目链接 题意: 地上有n种棍子, 其中有两种类型, 一种类型是可识别, 一种类型是不可识别, 每个棍子都有一个权值. 当你捡到可识别的, 那么你以后就不会再捡这个棍子, 如果是不可识别的, 那么你有 ...

  7. nutch 采集效率问题

    http://hi.baidu.com/jacklin/item/a8fbccf479f6a1d042c36a7c再附一篇:http://blog.csdn.net/laigood/article/d ...

  8. ping命令找不到

    重装系统后安装JDK了,网络一直不好,我ping了下,结果显示ping不是内部或者外部命令,在谷歌里百度了下,在环境变量的path后加上“;C:\Windows\System32”即可,果然有效哦. ...

  9. 【POJ1284】Primitive Roots 欧拉函数

    题目描述: 题意: 定义原根:对于一个整数x,0<x<p,是一个mod p下的原根,当且仅当集合{ (xi mod p) | 1 <= i <= p-1 } 等于{ 1, .. ...

  10. Altium Designer 定义板子外框

    Altium Designer 提供多种定义板子外形的方法. 第一种方法,在Files 面板(在界面下面System菜单条中查找)中选择PCB Templates命令.在这个界面下您可以选择符合您设计 ...