CSS 入门

2018-07-12 admin

一、CSS简介

1.什么是css

  • css指层叠样式表(ascading Style Sheets)
  • 样式定义如何显示HTML样式
  • 样式通常储存在样式表中
  • 外部样式表可以极大的提高工作效率
  • 实际就是学习选择器和css属性

2.CSS语法

选择器{属性:属性值;属性:属性值;} div{color:blue;font-size:20px;}

实例1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
body {background-color:red;}
h1   {font-size:40pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 40 px</h1>
<h2>这个标题设置的颜色为蓝色:blue</h2>
<p>这个段落的左外边距为 50 像素:50px</p> 
</body>
</html>

运行结果:

图片描述

实例2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例2</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>
​
<body>
​
<h1>这是标题</h1>
<hr>
<p>你可以看到这个段落是被设定的 CSS 渲染的。</p>

<p><a href="#" 
target="_blank">这是一个链接</a></p>

</body>
</html>

运行结果:

图片描述

3.id和class选择器

如果你需要在HTML里设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id选择器实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>选择器</title> 
<style>
#para{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="para">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

运行结果:图片描述

class选择器实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>选择器</title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题居中</h1>
<p class="center">这个段落居中。</p> 
</body>
</html>

运行结果:

图片描述

二、CSS基础

1.文本

  • color:#fff;        修饰字体颜色
  • text-align:left/center/right/justify   设置文本对齐
  • text-indent:2em;    设置文本缩进

2.字体

  • font-family:Microsoft YaHei;     改变字体样式
  • font-size:14px;        修改文字大小
  • font-weight:blod;       字体加粗

3.链接

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

4.列表样式(ul)

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用css,可以列出进一步的样式,并可用图形做列表项标记

实例


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>列表样式</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

运行结果:

图片描述

总结

本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会了如何使用CSS来添加背景、文字样式、以及链接样式,并定义列表样式。 如果需要更多CSS的信息,请关注我,我会持续更新。

原文链接:https://segmentfault.com/a/1190000015605648

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35806.html

文章标题:CSS 入门

相关文章
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
Windows系统下Node.js的简单入门教程
随着近日Paypal和Netflix宣告 迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP...
2017-03-24
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下: 首先来看一下运行效果图: 具体实现代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W...
2017-03-23
理解JavaScript的变量的入门教程
变量是用于存储信息的容器: 还记得在学校里学过的代数吗? 当您回忆在学校学过的代数课程时,想到的很可能是:x=5, y=6, z=x+y 等等。 还记得吗,一个字母可以保存一个值(比如 5),并且可以使用上面的信息计算出 z 的值是 11。...
2017-03-27
回到顶部