资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/HTML/CSS初步了解

HTML/CSS初步了解

miracledan / 3335人阅读

摘要：为标记语言提供了一种样式描述，定义了其中元素的显示方式。选择器指明了中的样式的作用对象，也就是样式作用于网页中的哪些元素基本语法第一种选择器叫选择器在里面写一个，通过这个就能找到这个。

一、CSS是什么？

　　它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

　　那么 html ccs  javascript 分别起到1了什么作用呢?

HTML CSS javaScript
结构 样式 行为

 

　

要分清楚他们分别负责什么。

二、CSS是干什么的？

　　比如那么说：盖一层楼，你要先盖后装修，光给你装修涂料有意义吗，肯定是要先盖好楼，才能装修，所CSS就是装修涂料，它自己没办法多带带存在，必须依靠结构，它没有html的存在，CSS一点意义都没有。

三、引入CSS的三种方法

　　CSS(cascading style sheet)层叠样式表

　　1、行间样式

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>    
  5.  5     <head>
  6.  6         <body>
  7.  7             <div style="
  8.  8                 width:100px;
  9.  9                 height:100px;
  10. 10                 background-color:green;">
  11. 11             div>
  12. 12             
  13. 13         body>
  14. 14 html>

运行效果：

　　2、页面级CSS

　　先来初步了解一下，页面级就是在head里面写一个标签叫

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>  
  5.  5         <style>
  6.  6              div{  
  7.  7                   width:100px;
  8.  8                   height:100px;
  9.  9                   background-color:green;
  10. 10                 }
  11. 11         style>
  12. 12     <head>
  13. 13         <body>
  14. 14             <div>div>
  15. 15             
  16. 16         body>
  17. 17 html

 　3、外部CSS文件(重点)

　是最高大上，最实用，在开发中经常用到的

　首先，我们要建一下文件，起个名名字后缀名要写出CSS

　　

 

　那如何如何将css文件和html联合起来呢？

　用link标签：herf是放css文件的

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div>div>
  9.  9             
  10. 10         body>
  11. 11 html>

 CSS文件：

</>复制代码 
  1. 1 div{
  2. 2     width:100px;
  3. 3     height:100px;
  4. 4     border-radius:50%;//圆角属性
  5. 5     background-color:green;    
  6. 6 }

这样就是成功的引用了外部的CSS。　　

四、选择器

1、什么是选择器呢？   每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素   基本语法： 　

第一种选择器叫ID选择器

在div里面写一个id，通过这个id就能找到这个div。

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div id="only">123456div>
  9.  9         body>
  10. 10 html>

怎么找呢，首先在css文件里面以#开头，之后id的值是什么就写什么之后{里面写css代码}

</>复制代码 
  1. #only{
  2.     background-color:red;
  3. }

 

提示：一个元素只能有一个id值，一个id值只能对应一个元素

简单说就是一点id的命名，只能有一个。

第二种选择器叫IClass选择器

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div class="demo">123456div>
  9.  9         body>
  10. 10 html>

Class选择器和id选择器差不多 以点（.）开头，后面写class值

</>复制代码 
  1. 1 .demo{
  2. 2     background-color:red;
  3. 3 }

提示：如果我用两个class及值相同可以吗。

答：是可以的

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div class="demo">123456div>
  9.  9             <div class="demo">78910div>
  10. 10         body>
  11. 11 html>
</>复制代码 
  1. .demo{
  2.     background-color:red;
  3. }

运行效果：

 

我那如想要改变背景色是红色同时字体是黄色，要如何做

那就可以在后面加多一个dmeo1

代码如下：

</>复制代码 
  1.  1 
  2.  2 
  3.  3     
  4.  4         <span class="hljs-string">CSS</span>
  5.  5         
  6.  6     
  7.  7         
  8.  8             
    123456
  9.  9             
    78910
  10. 10         
  11. 11 
</>复制代码 
  1. 1 .demo{
  2. 2     background-color:red;
  3. 3 }
  4. 4 .demo1{
  5. 5     color:yellow;
  6. 6 }

运行效果：

class选择器多对多。

第三种选择器叫标签选择器。

标签选择器直观明了，想选择元素的话，直接写上标签名称就好了

在css文件里面写上div，那么在html里面的所以div标签都可以改变。

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div>123456div>
  9.  9             <div>78910div>
  10. 10             <div>4545div>
  11. 11             <div>743543div>
  12. 12             <div>345345div>
  13. 13             <div>34879div>        
  14. 14         body>
  15. 15 html>
</>复制代码 
  1. 1 div{
  2. 2     background-color:red;
  3. 3 }

 运行效果：

第四种选择器叫I通配符选择器

通配符的表现形式极其的单一 （*）代表全部，自己成为选择器

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <span>123span>
  9.  9             <div>abcdiv>
  10. 10             <strong>454strong>
  11. 11         body>
  12. 12 html>
</>复制代码 
  1. 1 *{
  2. 2     background-color:yellow;
  3. 3 }

运行效果：

这时会看见页面全黄了，为什么呢？

不是说吗，*是代表所以全部呢

也都是标签，所以代表全部文档，所以这叫通配符选择器。

五、对比选择器优先级

先来对比运行id选择器和class选择器的优先级

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div id="only" class="demo">123div>
  9.  9         body>
  10. 10 html>

 css代码：

</>复制代码 
  1. 1 #only{
  2. 2     background-color:yellow;
  3. 3 }
  4. 4 .demo{
  5. 5     background-color:red;
  6. 6 }

 运行效果：

这里可以看出来id选择器的优先级更高。

 

再看class选择器和标签选择器对比

</>复制代码 
  1. 1 div{
  2. 2     background-color:yellow;
  3. 3 }
  4. 4 .demo{
  5. 5     background-color:red;
  6. 6 }

　运行效果：

这里就是可以看出class选择器优先级高

总结：id选择器>class选择器>标签选择器>通配符选择器。

 

第五种选择器叫I属性选择器

是可以通过属性选择的，比如有一个属性名叫id，那么有id的属性值的都能被选出来。

代码如下：

</>复制代码 
  1.  1 DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <title>CSStitle>
  5.  5         <link rel="stylesheet" type="text/css" href="lesson.css">
  6.  6     <head>
  7.  7         <body>
  8.  8             <div id="only" class="demo">1232div>
  9.  9             <div id="only2" class="demo">aaa3div>
  10. 10             <div id="only3" class="demo">2334div>
  11. 11         body>     
  12. 12 html>

css代码：

</>复制代码 
  1. [id]{
  2.     background-color:yellow;
  3. }

运行效果：

 

 

云服务器 GPU云服务器 人工智能初步 hadoop初步学习 html css HTML+CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1014.html

相关文章

  • 前端构建的初步尝试

    摘要：前言这篇文章的主要目的是告诉大家构建工具可以做那些事情大家不必去深入研究这个东西最基本的是有个概念什么是前端构建在平时我们浏览一些大型的站点会发现其中的一些经过压缩去掉了空白符注释经过了混淆和压缩一些引用的文件的链接会加上奇怪的字串文件例如 前言 这篇文章的主要目的是告诉大家,构建工具可以做那些事情.大家不必去深入研究这个东西.最基本的是有个概念. 什么是前端构建? 在平时我们浏览一些...

    Keven 评论0 收藏0

  • CSS 布局经典问题初步整理

    摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

    Amos 评论0 收藏0

  • 关于Html+css阶段学习总结

    摘要：再之后，通过专业老师的指导，开始进行前端知识的全面及系统性的学习。而这篇文章便是对这次学习的一次阶段性总结。的学习并不是太难，也可以说是很容易，但千里之行，这才刚刚开始，熟练的掌握，还需要不断的练习。 一、学习经历 进入大学不久，就加入了社团，从而对前端有了一个初步的了解，之后也做过一些学校的官网，积累了一些微小的经验。 到了大二的时候，学校开设了专门的html+css课程，从中也学到...

    CoXie 评论0 收藏0

  • 关于Html+css阶段学习总结

    摘要：再之后，通过专业老师的指导，开始进行前端知识的全面及系统性的学习。而这篇文章便是对这次学习的一次阶段性总结。的学习并不是太难，也可以说是很容易，但千里之行，这才刚刚开始，熟练的掌握，还需要不断的练习。 一、学习经历 进入大学不久，就加入了社团，从而对前端有了一个初步的了解，之后也做过一些学校的官网，积累了一些微小的经验。 到了大二的时候，学校开设了专门的html+css课程，从中也学到...

    Rindia 评论0 收藏0

  • 前端常用技术概述--Less、typescript与webpack

    摘要：前言讲起前端，我们就不能不讲与，在这两种技术广泛应用的今天，他们的扩展也是层出不穷，的扩展有等，的超集有等。如下注意你的样式文件一定要在引入前先引入。截止目前，已经发布了最新的版本。 前言：讲起前端，我们就不能不讲CSS与Javascript，在这两种技术广泛应用的今天，他们的扩展也是层出不穷，css的扩展有Less、Sass、Stylus等，js的超集有Typescript等。今天我们就简...

    番茄西红柿 评论0 收藏0

发表评论

登陆后可评论

0条评论

miracledan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<