`
Free-man
  • 浏览: 10283 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS样式表引入方法和基本选择器

阅读更多
   CSS全称重叠样式表,可以控制网页的布局,使网页拥有独特的风格,不同样式的网页可以给浏览者留下深刻的印象,所以在网页中使用CSS样式表显得非常重要,CSS可以利用4种方法引入到网页中应用:
1、行内式,代码如下
<h1 style="color:white;background-color:blue;">This is a line of Text</h1>

2、内嵌式,代码如下
<style type="text/css">
h1{
  color:white;
  background-color:blue;
}
</style>

3、导入式,代码如下
<style type="text/css">
@import "filename.css";
</style>

4、链接式,代码如下
<link href="filename.css" rel="stylesheet" type="text/css"/>

   导入式和链接式的区别:导入式本质由HTML规范来实现的,页面载入前引入该外部CSS文件;链接式本质由CSS规范来实现的,页面载入完再引入;所以若想实时看到网页的样式效果,就应该使用链接式引入CSS样式表。

    不管使用上述那种引入方法,样式表的组成主要是CSS选择器,可分为:基本选择器和复合选择器。
一、基本选择器又可分为:标记选择器、类别选择器和ID选择器;各种选择器具体代码演示如下:
1、标记选择器,h1为选择器,color为属性,red为属性值,color:red为声明
h1{color:red;font-size:15px;}

2、类别选择器,“.”为标识符,HTML元素使用class属性应用其样式
.red{color:red;font-size:15px;}

3、ID选择器,“#”为标识符,HTML元素使用id属性应用其样式
.red{color:red;font-size:15px;}

类别选择器和ID选择器的区别:class属性可以使用多个样式,样式效果取前者;id属性不能使用多个样式,若式样了,样式失效。

二、复合选择器又可分为:交集选择器、并集选择器和后代选择器;各种选择器具体代码演示如下:
1、交集选择器,使用:<div class="specail"/>
div.specail{......}

2、并集选择器,使用:<div/><p class="specail"/>
div,p.specail{......}

3、后代选择器,使用::<div><p class="specail"/><div>
div p.specail{......}


   当CSS样式在引入使用时,出现重叠时如何取向,即CSS的优先级(重叠特性),具体规范和约定如下:行内样式>ID样式>类别样式>标记样式

   网页的设计与布局好与不好,CSS的学习很重要,深信自己坚持每天多学一点,前台美工的开发应该不是很大的问题,希望大家也共享下自己的学习经过或经验,共同学习。
分享到:
评论

相关推荐

    CSS基础入门总结(很详细的哟)

    二、CSS选择器 (1)基础选择器 (i)标签选择器 (ii)类选择器 (iii)id选择器 (iv)通配符选择器 (2)复合选择器 (i)后代选择器 (ii)子代选择器 (iii)并集选择器 (iv)伪类选择器 三、CSS字体属性 (1...

    CSS样式不起作用?史上最全解决方法汇总

    目录浏览器缓存问题细节问题样式表关联问题选择器问题编码格式问题样式层叠问题 浏览器缓存问题 如果你反复检查认为代码没有问题,那么可能是浏览器缓存的问题。在排查前先试一下清除浏览器缓存,重启浏览器或者换个...

    CSS 样式的使用方式、选择器

    1、行内样式:同过元素的style属性来设置 &lt;p xss=removed&gt;hello 属性之间分号隔开。 2、内部样式:在&lt;head&gt;...引入外部样式表 p{font-size: 20px;color: red} &lt;link href="xxx.css" type="text

    尚硅谷_封捷_CSS扫盲

    CSS 层叠样式表 1 CSS 代码写在哪? 1.1 内联样式表:HTML 标签内 ;"&gt;落霞与孤鹜齐飞,秋水共长天一色 1.2 内部样式表:head 标签内,title...2.1 CSS 语法由三部分构成:选择器、属性和值:selector {property: value}

    前端领域,运用CSS3实现页面动态效果

    选择器:CSS3 引入了许多新的选择器,包括属性选择器、伪类选择器和伪元素选择器等。这些选择器可以更精确地选择元素,从而实现更复杂的样式设计。 属性:CSS3 添加了许多新属性,以支持更多的样式效果。例如,可以...

    css介绍快速学习

    CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。 简单一句话:CSS将网页内容和显示样式进行...

    css引入、选择器、特性.md

    层叠样式表,用于修饰html代码,进行网页布局

    css笔记课程笔记2019,5,22

    3、css的基本选择器(三种) ** 要对哪个标签里面的数据进行操作 (1)标签选择器 * 使用标签名作为选择器的名称 div { background-color:gray; color:white; } (2)class选择器 * 每个html标签都...

    CSS控制样式的三种方式(优先级对比验证)

    好了,直入主题,大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,分别是: 1&gt;外部样式表 : 将样式规则直接写在*.css文件中,然后再*.html页面中通过&lt;link&gt;标签引入的方式2&gt;...

    Javascript学习笔记-学JS的一手教程

    第一章 CSS样式表 1 1.1 什么是CSS 1 1.2 CSS的几种设置方式 1 1.2.1 内联样式表 1 1.2.2 嵌入样式表 2 1.2.3 外部样式表 2 1.2.4 输入样式表 3 1.3 样式规则的选择器 3 1.3.1 Html selector 3 1.3.2 class selector...

    前端css+html+布局笔记

    将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 &lt;link rel="stylesheet" type="text/css" href="文件的路径"/&gt; 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现...

    精心整理的一份CSS学习笔记+CSS思维导图

    文章目录一、CSS简介二、选择器2.1 基本选择器:2.2 组合(复合)选择器2.3 选择器的优先级三、盒模型四、CSS思维导图 一、CSS简介 CSS全称:层叠样式表 (Cascading Style Sheets) 。 CSS作用:美化界面,布局页面,...

    css入门笔记

    样式规则:由选择器和样式声明组成 3.外部样式 独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中...

    ie-css3.rar_head

    IE-Css3.Js 是一款让IE支持CSS3选择器的插件,使用方法超简单,你只需在HTML网页的HEAD标签内引入压缩包内的两个文件就可以,更多方法请查看压缩包内的使用说明。  请注意ie-css3的一些限制 :  样式表必须通过...

    CSS的使用

    选择器:规范了页面中哪些元素能够使用定义好的样式 3.外部样式表 1.创建一个单独的样式表文件保存样式规则 在css文件夹下新建一个CSS文件 并在里面添加好样式 2.在需要使用得页面上添加 link 标签 进行引入 4

    pcos:面向便携式组件的样式-大规模维护CSS的方法

    重要的是要说PCOS根本不是在重新发明轮子,它结合了Harry Roberts的ITCSS(倒三角CSS),BEM方法学的命名约定(块元素修饰符)和Brad Frost引入的Atomic Design的概念。术语成分组件是一个单元,代表独立于其层次...

    关于CSS引入方式的详细见解小结

    概念:CSS称之为层叠样式表或级联样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 作用:CSS以HTML为基础,提供了丰富的功能,而且还可以针对不同的浏览器设置不同的样式。CSS主要用于设置HTML页面中的...

    精通JavaScript+jQuery Part1

     12.5 自动选择CSS样式  第3部分 CSS混合应用技术篇  第13章 CSS与JavaScript的综合应用   13.1 JavaScript概述  13.2 JavaScript语法基础  13.3 实例一:输入时高亮显示的Excel表格   13.4 实例二...

    《精通Javascript+jQuery》光盘源码

     3.3 CSS选择器  3.3.1 标记选择器  3.3.2 类别选择器  3.3.3 ID选择器  3.3.4 选择器集体声明  3.3.5 选择器的嵌套  3.3.6 子选择器  3.3.7 属性选择器  3.4 CSS设置文字效果  3.4.1 CSS文字...

    web前端基础——CSS入门

    外部样式表 2.css选择器 id选择器: #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class选择器 .class名{} ...

Global site tag (gtag.js) - Google Analytics