精华内容
下载资源
问答
  • CSS 层叠样式表。 将网页中样式分离出来,完全由css来控制 增强样式复用性以及可扩展性。 格式: 选择器{属性:属性值;属性:属性值;} css和html代码相结合四种方式: 1.每一个html标签都有一个...
    CSS 层叠样式表。
    将网页中的样式分离出来,完全由css来控制
    增强样式的复用性以及可扩展性。
    格式:
    选择器{属性名:属性值;属性名:属性值;}
    css和html代码相结合的四种方式:
    1.每一个html标签都有一个style属性
    2.当页面有多个标签有相同样式时,可以进行复用y
    <style>
    css代码
    </style>
    3.当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件。
    通过在每个页面中定义
    <style> 
    @import url("1.css");
    </style>
    通过html中head标签中的link标签连接一个css文件。
    <link rel="stylesheet" href="1.css"/>
    技巧:为了提高相同的样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件。
    p.css,div.css....


    在一个css文件中使用css的import将多个标签样式文件导入。
    然后在html页面上,使用link标签导入这个总的css文件即可。


    1.css
    @import url("p.css");
    @import url("div.css");


    <link rel="stylesheet" href="1.css"/>


    ----------------------------------------------------------------------
    选择器:其实就是样式要作用的标签容器。
    当样式分离后,html作用在于用标签封装数据。让后将css加载到指定标签上。


    选择器的基本分类:
    1,标签选择器:其实就是html中的每一个标签名。
    2,类选择器:其实就是每一个标签中的class属性。用 . 的形式表示。
    中用来给css所使用。可以对不同标签进行相同样式设定。
    3.ID选择器:其实就是每一个标签中的ID属性。但是要保证ID唯一性。用#来标识。
    ID不仅可以被css所使用,还可以被javascript所使用。




    选择器优先级:ID>class>标签


    扩展选择器:
    1.关联选择器:其实就是对标签中的标签进行样式定义。选择器 选择器...
    2.组合选择器:对多个选择器进行相同样式定义。将多个选择器通过,隔开的形式
    3.伪元素选择器:其实就是元素的一种状态。
    a:link :超链接被点击后状态
    a:visited: 悬停在超链接点击后状态
    a:hover:   悬停在超链接上
    a:active : 点击超链接时
    在定义这些状态时,有一个顺序:L V H A
    p:first-letter
    p:first-line
    :focus : 很遗憾,IE6不支持,但FF支持


    CSS滤镜:气死通过一些代码完成丰富了样式
    当使用到css的更多属性时,还需要查阅css api.


    网页设计的时候:div+css.
    div:行级区域
    span:块级区域
    p: 行级区域。p中不要嵌套div.
    展开全文
  • 3.3.2 链接外部样式表 定义:把 CSS 样式定义写入一个以 css 为扩展名的文本文件中如 mystyle.css 形式:在 <head> 元素内加入代码 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 效果:外部样式表中...
  • 学习 CSS Cascading Style Sheets CSS就是 Cascading Style Sheets中文翻译为 层叠样式表简称样式表它是一种制作 就是 中文翻译为 层叠样式表简称样式表它是一种制作 网页新技术 网页新技术 样式表文件可以用...
  • css样式表学习手册.doc

    2020-12-02 00:31:18
    Css学习 CSS就是Cascading Style Sheets中文翻译为层叠样式表简称样式表它是一种制作网页新技术 样式表文件可以用任何文本编辑器例如记事本打开并编辑一般样式表文件扩展名为 .css 一如何在网页中插入CSS 在页面中...
  • 文章目录第8章 操作样式表8.1 创建外部样式表8.2 链接到外部样式表8.3 创建嵌入样式表8.4 应用内联样式8.5 样式的层叠和顺序8.6 使用与媒体相关的样式表 第8章 操作样式表 8.1 创建外部样式表 打开文本编辑器、编辑...

    第8章 操作样式表

    8.1 创建外部样式表

    • 打开文本编辑器、编辑、保存以.css为扩展名、UTF-8编码的文件

    提示 外部样式表要么是通过链接引用的(参见8.2节),要么是导入的(通过@import),不过不推荐导入。@import指令会影响页面的下载速度和呈现速度,在Internet Explorer中影响更为明显。

    8.2 链接到外部样式表

    <!-- 假设有一个style.css的外部样式表 -->
    <head>
        <meta charset="UTF-8" />
        <title>Test Link</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    

    提示 外部样式表的另一个好处是,一旦浏览器在某个页面加载了它,在随后浏览引用它的页面时,通常无需再向Web服务器请求该文件。浏览器会将它保存到缓存里,也就是保存到用户的计算机里,并使用这个版本的文件。这样做可以加快对页面的加载。不过,不必担心。如果随后对样式表作了修改,再将它传到Web服务器,浏览器就会下载更新后的文件,而不是使用缓存的文件(从技术上讲也有例外,但通常不会遇到这种情况)。

    提示 实践中最好将样式表组织在子文件夹里,而不是与HTML页面混在一起。常见的样式表文件夹名称包括css、styles等

    提示 HTML早期版本要求在link元素定义中包含type=“text/css”,但HTML5不要求这样做,因此可以像代码示例那样忽略它。

    8.3 创建嵌入样式表

    <head>
        <meta charset="UTF-8">
        <title>Test Style</title>
        <style>
            img{
                border:4px solid red;
            }
        </style>
    
    • 嵌入样式表的缺点是其他网页无法利用这个页面中定义的样式

    提示 当且仅当style元素出现在link元素后面的时候,嵌入样式表中的样式才会覆盖外部样式表中的样式

    提示 嵌入样式表是为页面添加CSS的次选方式。(也有例外的情况,如特定条件下拥有极大流量的网站。)

    提示 HTML5之前的版本要求在style开始标签中包含属性type=“text/css”,不过HTML5没有要求。因此你可以省略

    8.4 应用内联样式

        <img src="img/palau.jpg" width="250" height="163" alt="teststyle" style="border:4px solid red" />
    
    • 内联样式只影响一个元素

    提示 内联样式的优先级高于其他所有样式,除非其他地方与之冲突的样式标记了!important

    8.5 样式的层叠和顺序

    • 基本规则:在其他条件相同的情况下,越晚出现的样式优先级越高
    • 嵌入样式表:style元素和link元素谁出现的比较晚谁的优先级就越高
    • 内联样式表:优先级高于嵌入样式表和外部样式表
    • !important优先级最高,不过要避免使用它

    8.6 使用与媒体相关的样式表

    • 可以指定一个只用于特定输出的样式表,如只用于打印,或只用于在浏览器中查看屏幕。例如,可以创建一个具有打印和屏幕版本共有特征的通用样式表,再创建单独的打印样式表和屏幕样式表,分别包含只用于打印的属性和只用于屏幕显示的属性。
    <!--8-6-media.html-->
    <head>
    	<title>Test Media</title>
    	<link rel="stylesheet" type="text/css" href="8-6-media.css">
    	<link rel="stylesheet" type="text/css" href="8-6-media.css" media="print">
    </head>
    <body>
    	<p>Hello 
    	
    <!-- 8-6-media.css-->
    p{
    	color: red;
    }
    
    @media print{
    	p{
    		color:green;
    	}
    }
    

    提示 有9种可能的输出类型:all、aural、braille、handheld、print、projection、screen、tty和tv。浏览器对它们的支持程度各不相同(大多只有少量的支持)。实际上,用得上的只有screen和print(或许还应加上all),浏览器对它们的支持情况都很好。另一方面(可以这么说),设备对handheld的支持程度并不高,因此在为移动设备设计时,通常使用screen而不是handheld(参见第12章)。projection类型是为投影仪和其他类似的设备准备的,Opera的投影模式Opera Show支持这种类型。

    展开全文
  • CSS概念:cascading style sheets,层叠样式表。... sheets:是一个样式文件,它的扩展名为.css。 样式表的位置:为了学习方便,先用内嵌式样式(内部样式表)。  位置:<head>&...
    web标准:结构HTML,表现CSS,行为JavaScript。

    CSS概念:cascading style sheets,层叠样式表。级联样式表,简称:样式表。
         style:外观,个性化。
         sheets:是一个样式文件,它的扩展名为.css
     
    样式表的位置:为了学习方便,先用内嵌式样式(内部样式表)。
           位置:<head></head>之间
           标记:<style type="text/css">样式写在这里</style>
     
    CSS注释:
    • HTML注释:<!--注释内容-->
    • CSS注释:/*注释内容*/,单行和多行都是一种方法注释。
    CSS语法格式:
    声明方法:选择器{属性1:值1;属性2:值2;属性n:值n;}
    • 选择器:通过名称指定对哪些标签进行样式设置
    CSS基本选择器:
      style属性(行内样式):直接写在标签内。如:<p style="font-size:12px;color:green;">文字内容</p>
     
      标签:针对HTML的标签直接设置样式。
      ID:
        语法:以#开头。命名方法:建议全小写,以字母开头。

     类:

      语法:使用方法:<p class="类名">内容</p>

      定义的方法:用“.”开头,后跟类名。

      类名书写规范:以小写字母开始。

    通配符选择器:

    *{CSS规则}:针对当前页面所用的标签应用同样的样式(对标签的初始化)。

    ps:*{margin:0;padding:0;border=0;}

    建议对标签初始化时采用以下方法:body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border=0;}

    标签和类结合:

      ps:p.test1{color:red}

      针对p标签应用类名为test1的样式。

     

     

    转载于:https://www.cnblogs.com/purewhite/p/9681267.html

    展开全文
  • 链入外部样式表文件 【最常用】三、CSS border属性1、边框颜色 border-color2、边框粗细 border-width3、边框样式 border-style 一、初识CSS 1、是什么 CSS: 层叠样式表 或 级联样式表 (CascadingStyle Sheet) 2、...
    
    

    一、初识CSS

    1、是什么

    CSS: 层叠样式表 或 级联样式表 (CascadingStyle Sheet)

    2、作用

    修饰HTML页面,CSS可以控制HTML标签对象的宽度、高度、float浮动、文字大小、字体、背景等样式,从而达到想要的布局效果,使得HTML页面更为美观 (化妆品,美丽的外衣)。

    3、文件扩展名

    文件扩展名 (后缀名):.css


    二、HTML中嵌套使用CSS的三种方式

    1、内联定义方式 (内联样式)

    1.1、在标签内部使用style属性设置元素的CSS样式,仅影响一个元素

    1.2、语法格式:

    <标签 style="样式名: 样式值; 样式名: 样式值; ..."></标签>
    

    2、样式块方式 (内部样式表)

    2.1、在 head标签中使用style块

    2.2、语法格式:

     <head>
    	<style type="text/css">
    	    选择器{
    	        样式名: 样式值;
    	        样式名: 样式值;
    	        ...
    	    }
    	    选择器{
    	        样式名: 样式值;
    	        样式名: 样式值;
    	        ...
    	    }
    	    ...
    	</style>
    </head>
    

    3、🔺链入外部样式表文件 【最常用】

    3.1、将样式写在一个单独的xxx.css文件中,在需要的网页中直接引入CSS文件

    3.2、语法格式:

    <link type="text/css" rel="stylesheet" href="CSS文件路径" />
    

    3.3、好处:易维护且维护成本较低。


    三、CSS border属性

    1、border-color 边框颜色

    border-color: red;                           整个边框都为红色

    border-color: red yellow;                 上下边框为红色左右边框为黄色

    border-color: red yellow blue;          上边框红色右边框为黄色下边框为蓝色左边框为黄色

    border-color: red yellow blue green;【上】边框为红色【右】边框为黄色【下】边框为蓝色【左】边框为绿色

    总结:若border-color有多个不同颜色的样式值,是按顺时针【上右下左】给边框布局颜色。


    2、border-width 边框粗细

    border-width: medium(默认适中)   thin(细)   thick(粗)   10px(自定义)

    border-width: 1px 5px 10px; (顺时钟: 上右下左)


    3、border-style 边框样式

    border-style: none(默认)   solid(实线)   double(双线)   dotted(点虚线)   dashed(短虚线)

    可简写成:border: solid red 1px;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS border属性</title>
    </head>
    
    <body>
        <!--HTML中引入CSS的第一种方式:内联定义方式-->
        
        <!--
            width 宽度样式
            height 高度样式
            background-color 背景色样式
            display 布局样式 (none表示隐藏,block表示显示)
        -->
    
        <!-- 边框属性 border
            边框颜色  border-color
                 border-color: red; 整个边框都为红色
                 border-color: red yellow; 上下边框为红色,左右边框为黄色
                 border-color: red yellow blue; 上边框为红色,右边框为黄色,下边框为蓝色,左边框为黄色
                 border-color: red yellow blue green;【上】边框为红色,【右】边框为黄色,【下】边框为蓝色,【左】边框为绿色
                 总结:border-color如果有多个不同颜色的样式值,是按顺时针【上右下左】给边框布局颜色
    
            边框粗细  border-width 
                border-width: medium(默认适中) thin(细) thick(粗) 10px(自定义)
                border-width: 1px 5px 10px; (顺时钟: 上右下左)
    
            边框样式  border-style 
                border-style: none(默认) solid(实线) double(双线) dotted(点虚线) dashed(短虚线)
    
            可简写成:border: solid red 1px;
        -->
        
        <div style="width: 300px; height: 300px; background-color: dodgerblue; display: block;
                            border-color: red; border-width: 4px; border-style: solid;">这是一个div</div>
    
        <br />
    
        <div style="width: 300px; height: 300px; background-color: dodgerblue; display: block;
                            border: 4px red solid;">这是一个div</div>
    
        <br />
    
        <div style="width: 300px; height: 300px; background-color: dodgerblue; display: block;
                            border-color: red yellow blue green; border-style: solid; border-width: 4px;">这是一个div</div>
    </body>
    </html>
    

    页面效果如下:

    展开全文
  • CSS简介及基本知识

    2019-09-29 12:35:13
    Sheets :就是一个样式文件,它的扩展名为.css Style:外观,个性化 样式表的位置 为了学习方便,先用内嵌式样式(内部样式表) 位置:<head></head>之间。 标记:<style type=”text/css”>样式...
  • php-CSS-2

    2016-08-15 17:21:00
    CSS第一天: ... Sheets :就是一个样式文件,它的扩展名为.css Style:外观,个性化 样式表的位置 为了学习方便,先用内嵌式样式(内部样式表) 位置:<head></head>之间。 ...
  • Study 5 —— CSS概述

    2017-12-04 10:31:00
    CSS(Cascading Style Sheet)称为层叠样式表,也可以称为CSS样式表或样式表,其文件扩展名为.css,CSS是用于增强或控制网页样式,并允许将样式信息与网页内容分离一种标记性语言。引用样式表目的是将“网页结构...
  • css层叠样式表 将网页中样式分离出来 完全由css来控制 增强样式复用性以及可扩展性 选择器(属性:属性值;属性:属性值…) CSS和html代码相结合四种方式 1、每一个html标签都有一个style属性 2、当...
  • Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS脚本语言,即SassScript。Sass包括两套语法。最开始...
  • Web基础—CSS

    2014-10-27 10:46:58
    css是英文Cascading Style Sheets缩写。 它是一种用来表现HTML(标准通用标记语言一个应用...层叠样式表 外文名 Cascading Style Sheets 外语缩写 CSS(也做文件扩展名) 其他称
  • 第一章 CSS样式入门 本章要点 了解CSS基本概念 熟悉CSS常用单位 熟悉编辑和浏览CSS方法 ...CSS,也可以称为CSS样式表或者样式表,其文件扩展名为.css。 CSS,是用于增强或控制网页样式并允...
  • CSS基础知识

    2019-09-21 02:29:14
    是纯文本文件扩展名.css。CSS是一种描述性文本,用于增强或控制网页的样式,并允许将样式信息与网页内容分离。HTML是标识页面结构标记语言。随着HTML成长,为了满足页面设计者要求,H...
  • 本文转载于:猿2048网站CSS基础知识(概念、块级元素、行内元素、... 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML结构(HTML标签即html)与样式(显示样式即css)进...
  • CSS---学习笔记总结

    2019-04-25 21:57:25
    在做项目时,总是被css样式困扰,系统梳理下: ... 外部样式:将所有样式放在一个或多个.css为扩展名的外部样式表文件中,通过<link>标签将样式链接到HTML文档中。 <!DOCTYPE html...
  • css(层叠样式表)是一门标记性语言,html和css不是编程语言,没有变量,函数,作用域等概念。语法简单,但是看起来非常繁琐没有逻辑,而且很多样式都大量冗余。 很多后台人员写出来css代码,没有规范就非常...
  • 认识 Html-css

    2020-07-15 23:51:36
    HTML文件的文件扩展名为.htm或.html。 简单来说html是用来写网页内用的语言,方便简单是他的特点。 css css是层叠样式表(英文全称:Cascading Style Sheets)是一种du用来表现HTML(标准通用标记zhi语言的...
  • 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML结构(HTML标签即html)与样式(显示样式即css)进行分离 ² CSS语法结构 语法格式:选择器{ 属性名称: 属性值**;** ...
  • WEB02_CSS

    2019-08-18 17:39:38
    CSS是英文Cascading Style Sheet缩写又称为层叠样式表。主要用于设置HTML页面中文本内容(字体、大小、对齐方式等)、图片外形(高宽、边框样式、边距等)以及版面布局等外观显示样式。 2.创建CSS文件 不...
  • JavaScript第四课-CSS

    2013-10-18 19:25:30
    CSS层叠样式表: 将网页中样式分离出来,完全由CSS来控制 增强样式复用性以及可扩展性 格式:  选择器{属性:属性值;属性:属性值....} CSS和HTML代码结合四种方式 1、每个html标签独有一个style属性。 ...
  • 简单CSS改进网站设计三个技巧 ...css是层叠样式表的意思,是一种把实际内容与陈述代码分离方法。通常,网站设计中会建立一整套css样式标准,这些标准存储在一个扩展名为css单独文件中。然后...
  • 第一周总结 前端开发

    2020-07-04 19:28:42
    一个完整的文件格式=文件名+分隔符+扩展名。 标记名,属性,元素内容共同决定了一个元素显示内容和行为,例如:a是标记名:表示这是一个超链接。 元素内容:表示要在页面上显示立即加入。 href属性:表示用户点击它...
  • 认识HTML

    2020-12-08 20:58:55
    表现 W3C(万维网联盟)——CSS(层叠样式表/级联样式表) 行为 ECMA(欧洲电脑场商联合会)——JavaScript(一个轻量级弱类型脚本语言) 二、站点创建 1.站点作用 A.用来归纳一个网站上所有网页/素材以及...
  • Ionic4—node-sass详解

    2019-11-13 21:35:03
    Sass是一种预处理器脚本语言,可以解释或编译成层叠样式表CSS。 Sass包含两种语法。其一较旧语法使用缩进,将代码块和换行符分隔为单独规则。其二较新语法SCSS采用像CSS这样块格式,使用大括号表示代码块,...
  • css基础知识整理

    2020-08-13 10:18:02
    层叠样式表,美化html页面 div、span、p标签 都是容器,用来包裹html代码统一设置样式 引入css 标签上添加style属性,不推荐! 通过style标签引入css 引入外部css文件 选择器 基本选择器 标签选择器 类...
  • Sass是一种预处理器脚本语言,可以解释或编译成层叠样式表(CSS)。 Sass包含两种语法:较旧语法使用缩进将代码块和换行符分隔为单独规则;较新语法SCSS使用像CSS这样块格式。它使用大括号来表示代码块和...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

层叠样式表文件的扩展名