您的位置：首页 > Web前端 > CSS

HTML学习之Css基本语法、样式表和选择器的初步认识

2017-06-01 15:30 861 查看
经过了几天的HTML学习，自己对HTML的基本标签已经会初步使用了，看着自己上次用基本标签做出来的注册页面，感觉上是满满的开心。

学会了基本标签，接下来我就开始了对CSS的学习了；

作为一枚新手，就应该把学过的知识总结记录下来，

这样不仅可以回顾知识，更重要的是养成一个良好的学习习惯。

了解Css基本语法和类型

什么是Css？

Cascading Style Sheets----层叠样式表。

应用：规范的显示HTML元素，解决内容与表现分离的问题。

基本语法： h1{color:red;font-size:20px;}

h1表示选择器（后面介绍），即你要对什么东西进行设计，选择器就是什么；设计内容用大括号括起来，在大括号里面，都是(属性：值)进行书写，属性间用分号隔开。

学习Css，首先就要了解什么是样式表：

样式表就是你对代码的各种编写，当你使用浏览器运行代码的时候，浏览器就会根据样式表来对代码进行格式化。

样式表又分内部样式表和外部样式表：

内部样式表即直接在html代码中使用，在<head>标签中定义如：

<head>

<style type=”text/css”>

p{colcr:red; font-size:20px;}

</style>

</head>

像这样定义后，<body>里<p>标签内容就会按红色，20像素显示。
type=”text/css”表示css样式。

当单个文件需要特别样式时，就可以使用内部样式表。

 

外部样式表：使用".css"文件定义；在html练习保存的路径下，建立新的文件，后缀名改为.css，

然后在此文件中定义样式如：p{colcr:red; font-size:20px;}，在html中通过<link>标签引用。

<head>

<link rel=”stylesheet” style=”text/css” href=”样式表路径”>

</head>

之后，你所写的<p>标签里面的内容就会按照你设定的样式输出了。

rel="stylesheet" ，rel属性规定了当前文档与被连接文档之间的关系在这使用，

stylesheet就是样式表的意思，所以，rel="stylesheet"就是表明要写css了。

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

 

我们在写css的时候，一般都是把样式表的样式放进选择器里面，然后引用选择器，来使用样式。

css选择器：元素选择器，类选择器，id选择器。

元素选择器：直接应用与html标签，如p{colcr:red;
font-size:20px;}就是元素选择器的一种。

 

类选择器：以”.”定义，可以在页面中多次使用

如在.css文件中定义一个类选择器：.center{text-align:center}

我们在html文件中就可以多次使用了：

<h3 class=”center”>标题</h3>   <p class=”center”>内容</p> ....

 

Id选择器：以”#”来定义，在同一个页面里只能使用一次

如在.css文件中定义：#blue{color:blue}和#center{text-align:center}

在html文件中可以使用：

<h3 id=”blue”>标题</h3>    <p id=”center”>内容</p>

 

相互使用这些选择器，会觉得写css是多么的有趣的。

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航