前端学习之路css(01)-简介

来源：互联网发布：360关键词怎么优化编辑：程序博客网时间：2024/05/20 10:53

CSS 简介

1. CSS是什么

CSS 指层叠样式表 (Cascading Style Sheets)；
样式定义如何显示 HTML 元素；
样式通常存储在样式表中；
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题；
外部样式表可以极大提高工作效率；
外部样式表通常存储在 CSS 文件中；
多个样式定义可层叠为一。

2. CSS的存在意义

它解决了样式和内容分离的问题，使开发更加灵活。

3. CSS基础语法

css语法主要由两方面构成：选择器selector、声明declaration；
选择器通常是我们想要控制html样式的标签，比如h1等；
所有声明放入到一个大括号里，单个声明采用key:value方式，不同声明用;隔开，且声明最后要以;结尾；
声明中不要在属性值(key)与单位(value)之间留有空格；
注释语法：” /*…*/ “

这里写图片描述

CSS 引用

我们在css中可以自定义样式，在html元素中引用自定义样式需要利用id/class。

1. id选择器

id选择器的定义用”#”来声明；
id选择器直接通过id来引用。

<!doctype html><html><head><meta charset="utf-8"><title>css</title><style type="text/css">#myP{color: blue; font-size: 16px}  </style></head><body><p id="myP">哈哈</p><div id="log" name="log"></div></body></html>

这里写图片描述

2. class选择器

class选择器的功能和id选择器的功能相同，只是它们作用范围不同；
id选择器对应的以个为单位的标签，而class对应一类标签；
class选择器以”.”开始声明.xxx，标签可以通过class=”xxx”来调用；
class选择器还可以为某一类标签声明，比如p.xxx，选择器属性只对p类标签生效。

.myClass{color: yellow; font-size: 22px}p.pClass{color: blue; font-size: 22px}<body><p class="myClass">p_myClass</p>  <!-- 显示为myClass样式 --><p class="pClass">p_pClass</p>    <!-- 显示为pClass样式 --><h1 class="pClass">haha</h1>      <!-- pClass样式不生效 --></body>

CSS 创建

我们在学习html基础的时候讲到过css样式总共分为三种，温习一下
外部样式表
内部样式表
内联样式

外部样式表

当样式需要应用在很多地方时，外部样式表是最佳选择。每个html文件利用<link>标签链接到样式表中。
外部样式表其实就是以.css结尾的文件。

 <head> <link rel="stylesheet" type="text/css" href="路径/myCss.css"> </head>

内部样式表

当单个html需要特殊样式时，最好利用内部样式表；
将内部样式表声明在head中的style标签之中。

内联样式

内联样式需要将内容和表现放到一起设置，这样会丧失css的优势导致代码混乱，慎用此类模式。
它一般只实用在单个html文档中单个标签的特殊样式，不过为了保持良好的习惯，此类情况应该利用内部样式表来实现；
例子中一个典型的内联样式。

<p style="color:blue;font-size:18px">haha</p>

0 0