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. CANoe 入门 Step by step系列(三)简单例子的剖析【转】

    最好的学习方式是什么?模仿.有人会问,那不是山寨么?但是我认为,那是模仿的初级阶段,当把别人最好的设计已经融化到自己的血液里,变成自己的东西,而灵活运用的时候,才是真正高级阶段.正所谓画虎画皮难画骨. ...

  2. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  3. JDK源码阅读(三) Collection<T>接口,Iterable<T>接口

    package java.util; public interface Collection<E> extends Iterable<E> { //返回该集合中元素的数量 in ...

  4. 基于STM32F10x的串口(USART)输入输出编程

    1 前言 STM32有强大的固件库,绝大部分函数都可以有库里面的函数组合编写.固件库可以到ST官网(www.st.com)上下载,也可以搜索“STM32 固件库 v3.5”下载到固件库.本文章就是基于 ...

  5. 常用machine learning数据集

    ImageNet:非商业化的可视化大数据 截止到2015年5月1日,ImageNet数据库拥有超过1500万的图像. cifar10:10类物体识别数据集 数据集中包含60,000幅32*32图像,共 ...

  6. bzoj 1051: [HAOI2006]受欢迎的牛 tarjan缩点

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2092  Solved: 1096[Submit][Sta ...

  7. BZOJ 4010 菜肴制作

    Description 知名美食家小A被邀请至ATM 大酒店,为其品评菜肴. ATM酒店为小A准备了\(N\)道菜肴,酒店按照为菜肴预估的质量从高到低给予\(1\)到\(N\)的顺序编号,预估质量最高 ...

  8. [BZOJ 3218] A + B Problem 【可持久化线段树 + 网络流】

    题目连接:BZOJ - 3218 题目分析 题目要求将 n 个点染成黑色或白色,那么我们可以转化为一个最小割模型. 我们规定一个点 i 最后属于 S 集表示染成黑色,属于 T 集表示染成白色,那么对于 ...

  9. 【HDU3440】House Man (差分约束)

    题目: Description In Fuzhou, there is a crazy super man. He can’t fly, but he could jump from housetop ...

  10. 14.8.4 Moving or Copying InnoDB Tables to Another Machine 移动或者拷贝 InnoDB 表到另外机器

    14.8.4 Moving or Copying InnoDB Tables to Another Machine 移动或者拷贝 InnoDB 表到另外机器 这个章节描述技术关于移动或者复制一些或者所 ...