7-[CSS]-css介绍，引入方式

1.CSS介绍：层叠样式表(Cascading Style Sheets)

我们为什么需要CSS?

使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS的出现解决了下面两个问题：

  1. 将HTML页面的内容与样式分离。
  2. 提高web开发的工作效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

2.CSS语法

CSS基础语法

CSS语法可以分为两部分：

  1. 选择器
  2. 声明

声明由属性和值组成，多个声明之间用分号分隔。

CSS注释

注释是代码之母。

/*这是注释*/

3.三种方式：引用CSS样式

  • 内联样式
  • 行内样式表
  • 外部样式表
    • 链接式
    • 导入式

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

原文地址：https://www.cnblogs.com/venicid/p/9123503.html

时间： 2024-10-12 07:03:31

7-[CSS]-css介绍，引入方式的相关文章

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

css js 的引入方式和书写位置

css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red"></div> 2.内嵌(写在head标签内) <head>     <style>   #div1{ width:100px; height:100px; background:red; } </style> </head> 3.外联

CSS三种引入方式：内联、页级、外联

1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS作为测试使用,可以查找代码中bug. 1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> 3 </body> 2.页级CSS 页级CSS

css快速入门-引入方式

一.概述 HTML是骨架.框架CSS是外表.衣服JS是动作.肌肉 css的主要作用是对元素进行渲染.1.找到要操作的标签(选择器)2.对定位的标签进行操作(属性) 二.CSS引入方式 1.行内式 <p style="background-color:red">行内式</p> 2.内联式 在head标签内使用 <html> <head> <style> div { background-color:red; } div p {

CSS四种引入方式

第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种引入方式--> <div style="color: red;backg

表单控件 css的三中引入方式css选择器

1. 表单控件: 单选框 如果两个单选的name值一样,会产生互斥效果 <p> <!--单选框--> 男<input type="radio" name="sex" value="man" checked="checked"> 女<input type="radio" name="sex" value="woman">

css样式的引入方式

首选来介绍一下什么是CSS?(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,其实就是一种层叠样式表. CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. 就像造房子一样,如果html是基地的话,那么CSS就是装修,只有装修的房子

CSS【03】：CSS 基础选择器与三种引入方式

基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 格式: 标签名称 { 属性: 值; } 注意点: 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 作用:根据指定的 id 名称找到对应的标签,然后设置属性 格式: #

CSS 引入方式 选择器

---恢复内容开始--- CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 步骤: A.找到标签 B.操作标签 一 CSS四种引入方式 1.行内式 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 <head> <meta charset="UTF-8">

前端——CSS的引入方式、选择器

前端--CSS的引入方式.选择器 什么是CSS? 层叠样式表(就是用来调节标签的样式) CSS注释 /*单行注释*/ /*多行注释1 多行注释2 多行注释3 */ 注释的使用 css应该是一个独立的文件 /*页面通用样式*/ /*顶部导航栏样式*/ /*侧边菜单栏样式*/ -- css语法结构 选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;--} css三种引入方式 外部css文件(最正规的书写方式) /*mycss*/ /*这是一个非常牛逼的页面的css样式文件*/ /