4、前端开发:CSS知识总结——简介、语法和种类(入门基础)

简介: 4、前端开发:CSS知识总结——简介、语法和种类(入门基础)

简介:什么是 CSS?


CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个


语法:


       CSS 语法规则由两个主要的部分构成:选择器,以及一条或多条声明:


       选择器通常是您需要改变样式的 HTML 元素。


       每条声明由一个属性和一个值组成。


       属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。


       CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:



12.jpeg

p {color:red;text-align:center;}

CSS 注释

       注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。


       CSS注释以 /* 开始, 以 */ 结束, 实例如下:


/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

种类 :

1、内联样式/行内样式


       直接写在标签的style属性里面,属性值写CSS样式


       语法  样式名:样式值;(名值对);可以写多组样式,以分号隔开即可;


2、内部样式表


       在head标签内部写一个style标签,通过各种选择器选中对应元素,在{}内设置样式,样式结构也是名值对,可以写多组样式,必须用分隔号隔开,最后一个样式可不用分隔号,但一般都用。


<head>
  <style>
    /*选择符{属性:属性值;属性:属性值;}*/
    a{color:#FF0000;}
    #img1{width:800px;}/*id选择器*/
    .img2{width:800px;}/*类选择器*/
  </style>
</head>

3、外部样式表


       在html文件外,新建.css文件,在css文件里,选中对应的元素,设置样式


       通过link标签,引入.css文件,即可生效


       例如:


<head>
  <link href="a.css" type="text/css" rel="stylesheet">
</head>


相关文章
|
6天前
|
缓存 前端开发 Java
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
【8月更文挑战第10天】java基础巩固,工具类的封装
11 1
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
|
8天前
|
存储 前端开发 JavaScript
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
【8月更文挑战第8天】10min快速入门java的基础语法
21 2
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
|
11天前
|
前端开发 JavaScript 程序员
后端程序员的前端基础-前端三剑客之CSS
后端程序员的前端基础-前端三剑客之CSS
23 8
|
8天前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
19 2
|
8天前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
13 2
|
8天前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
12 2
|
11天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
5天前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
10天前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
前端开发
CSS基础入门(下)
WEB基础代码思维导图——CSS篇
CSS基础入门(下)