HTML中放置CSS的三种方式和CSS选择器

(一)在HTML中使用CSS样式的方式一般有三种:
1 内联引用
2 内部引用
3 外部引用。
第一种:内联引用(也叫行内引用)
就是把CSS样式直接作用在HTML标签中。

   <p style="font-size: 10px; color: #FFFFFF;">

    使用CSS内联引用表现段落.

   </p>

特点:内联的样式比其他方法更加灵活,但需要和展示的内容混淆在一起,内联样式会失去一些样式表的优点。
第二种:内部引用(也叫内嵌式)
使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里。

  <head>

       ……

      <style type="text/css">

            /* 设置本页面p标签中的文字为以下样式*/

             p{

     font-size: 10px;

     color: #FFFFFF;

             }

       </style>

  </head>

特点 : 适合用于一个HTML文档具有独一无二的样式时。
第三种:外部引用
CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.
外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.
外部引用是W3C推荐使用的
实现外部引用有两种方式:
(1)使用link标签引用CSS
    (2)使用@import导入CSS

  <head>

       ……

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

      <style type="text/css">

             @import "mystyle2.css"

              …….  /*其它CSS定义*/

      </style>

  </head>
注 : 如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方会以最后定义的为准。
(二)CSS选择器有六种选择符:
1 HTML选择符
2 类选择符
3 ID选择符
4 关联选择符
5 组合选择符
6 伪元素选择符
1 HTML选择符 : 即是HTML标签,用来改变一个指定标签的样式,任何HTML元素都可以是一个CSS的选择符。
语法:HTML标签名{属性:值}

  p  { text-indent:3em; }  /*当中的选择符是p*/

  h1{ color:red; }  /*当中的选择符是h1*/

 

2 类选择符 : 匹配文档中元素E的class属性的属性值为classname的元素
语法:标记名.类名{属性:值} 或 .类名{属性:值}
类选择符名称的定义方式是,"."符号,英文"dot",后加类名称classname
类选择符的定义需要有.符号(.符号标明是类选择符),但是HTML文档中的标签的class属性名不能出现.符号,见下面示例:

  p.dark-row{ background:#EAEAEA; }    /*设置p标签中class属性为dark-row的*/

  .note{ font-size:small }            /*为note的类可以被用于任何元素*/

  <p class="dark-row">第一段</p>             <!– 具有类dark-row样式 -->

  <span class="dark-row">第二段</span>    <!– 没有类dark-row样式 -->

  <span class="note">第三段</span>           <!– 具有类note样式 -->

  <div class="note">第四段</div>        <!– 具有类note样式 -->
3 ID选择符 : 匹配文档中元素E的id属性的属性值为idname的元素
语法:ID名称{属性:值}
ID选择符名称的定义方式是,#符号,英文"pound",后加ID名称idname
ID选择符的定义需要有#符号(#符号标明是ID选择符),但是HTML文档中的标签的id属性名不能出现#符号,见下面示例
id属性的特殊之处在于,一个文档中只能有一个元素使用一个ID选择符(与class属性正好相反),id属性可以用来单一地标识一个元素 。

  #main{ text-indent:3em; }  /*ID名称main前加上一个#号*/

  … …

  <p id=“main”>文本缩进3em</p>  <!– 在html的p标签中指定id属性main -->

 

4 关联选择符 : 也称包含选择符,可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义
语法:选择符1 选择符2...{属性:值}
table a{font-size:12px}  
在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。
5 组合选择符:也叫选择符组,可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义。
语法:选择符1,选择符2,.,..{属性:值}
h1, h2, h3, h4, h5, h6 { color: green }

  p, table{ font-size: 9pt }

    效果完全等效于:
  p { font-size: 9pt }
  table { font-size: 9pt }

 

6 伪元素选择符是指对同一个HTML元素不同状态的一种定义方式。例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态,就可以使用伪元素选择器来定义。
语法:标签:伪元素{属性:值;}

  a:link {color: #FF0000; text-decoration: none}           /* 未访问的链接 */

  a:visited {color: #00FF00; text-decoration: none}         /* 已访问的链接 */

  a:hover {color: #FF00FF; text-decoration: underline}   /* 鼠标在链接上 */

  a:active {color: #0000FF; text-decoration: underline}   /* 激活链接 */
提示:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:a:active 必须被置于 a:hover 之后,才是有效的。
最近整理的所学的浅显知识,若有错误,敬请指正.

 

转载于:https://www.cnblogs.com/hongxinlaoking/p/4675073.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

shiro使用jdbc_realm登录验证

2019独角兽企业重金招聘Python工程师标准>>> pom.xml <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven…

java 公因数_Java程序(最大公因数与最小公倍数)

package 求两个数的公约数和公倍数;import java.util.Scanner;public class MN{public static void swap(int a,int b)//交换位置{int k;if(a{ka;ab;bk;}}static int shu(int a,int b)//循环寻找最大公约数{int k,y;swap(a,b);while(a%b!0){ya%b;ab;by;}return b;}static int s…

vs2010中MEX文件建立与调试

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** http://item.taobao.com/item.htm?spma1z10.5-c.w4002-9510581626.24.ZO6sko&id4…

Javascript 严格模式详解

一、概述 除了正常运行模式&#xff0c;ECMAscript 5添加了第二种运行模式&#xff1a;"严格模式"&#xff08;strict mode&#xff09;。顾名思义&#xff0c;这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的&#xff0c;主要有以下几…

python类介绍_面向对象 Python的类 介绍

python中定义类的方法很简单&#xff0c;用关键字class&#xff0c; 其中可以包含函数 用 def#!/usr/bin/env python# -*- coding:UTF-8 -*-class Test_N:""" class get a name and count string or number """def __init__(self, n):self.name …

使用tableView崩溃

2019独角兽企业重金招聘Python工程师标准>>> 1错误2 正确 转载于:https://my.oschina.net/u/2601834/blog/618892

visuall assist x 破解方法

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 转自&#xff1a;http://blog.csdn.net/cazicaquw/article/details/6717126 试用期过了…

python笔记1

1.字典不包含从左到右的顺序 2.If for 表达式&#xff1a;for x in xx:表达式 写为 表达式 for x in xx 3.元组&#xff0c;字符串 不可变性 &#xff08;1&#xff09;t.index&#xff08;&#xff09; t.count() &#xff08;2&#xff09;T[0]1 #change #error &#xf…

Java实现连连看源代码文档_Java实现游戏连连看(有源代码)

Java实现游戏连连看(有源代码) JAVA语言实现连连看游戏 1.课程设计目的 Java语言是当今流行的网络编程语言&#xff0c;它具有面向对象、跨平台、分布应用等特点。面向对象的开发方法是当今世界最流行的开发方法&#xff0c;它不仅具有更贴近自然的语义&#xff0c;而且有利于软…

C语言中auto,register,extern,static【转】

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 语言中提供了存储说明符auto&#xff0c;register&#xff0c;extern&#xff0c;stat…

Oracle if else if for case

------------------游标forif else if DECLARE cursor s_cursor is SELECT * from emp;--定义游标 beginfor r in s_cursor loop--循环if r.deptno10--if判断then dbms_output.put_line(名字:||r.ename||sal||r.sal);else if r.deptno20then dbms_output.put_line(名字:||r.ena…

java汉字转化accic_Java自主学习贴

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼2019-08-25链表学习续实现数据内容查询功能interface ILink{//创建一个接口用于定义方法标准//定义增加方法public void add(E e) ;//定义获取元素个数方法public int getLength();//判断是否为空集合public boolean isEmpty();//定…

SEO的十种赚钱方式

我深深的想要通过的自己的SEO技术赚钱。其实&#xff0c;掌握一门技术是次要方面&#xff0c;学会把技术变现才是重中之重&#xff0c;所以你说学习SEO重要吗?挺重要&#xff0c;但绝不是最重要的。学SEO的赚钱方式才是最重要的。那么SEO都有哪些赚钱方式呢?我罗列了十种赚钱…

sizeof详解

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** sizeof&#xff08;&#xff09;功能&#xff1a;计算数据空间的字节数 #include<…

关于C/C++中的“auto”关键字

C/C 98标准 C03标准 早在C98标准中就存在了auto关键字&#xff0c;那时的auto用于声明变量为自动变量&#xff0c;自动变量意为拥有自动的生命期。此用法是多余的&#xff0c;因为即使定义变量时不加"auto"&#xff0c;变量也会有自动的生命期。用法如下&#xff1a;…

学java的人都是什么性格_什么样的人适合学习Java编程

展开全部下面咱们说一下Java更适合那些人群第一种&#xff0c;理工科专业。如果你大学时学的是理工科专业&#xff0c;对Java有一定的了解&#xff0c;那么你还是比较适合学Java的&#xff0c;如果你大学期间学过Java那就更好了&#xff0c;现在再学习只会事半功倍。因为学习Ja…

C++浅拷贝和深拷贝的区别

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** c默认的拷贝构造函数是浅拷贝 浅拷贝就是对象的数据成员之间的简单赋值&#xff0c; 如…

Innodb ibdata数据文件误删,如何恢复

Innodb的ibdata数据文件误删除后的操作流程&#xff1a;注意&#xff1a;误删除后&#xff0c;你的数据库是还可以工作的&#xff0c;数据照样可以写入&#xff0c;切记&#xff0c;千万不要把mysqld进程杀死&#xff0c;否则就没法挽救了。首先找到mysqld的进程pid&#xff0c…

redis的java客户端名称_java里常用的redis客户端简介

zepto返回顶部动画点击返回顶部 function goTop(acceleration, time) { acceleration acceleration || 0.1; time time || 16; v ...Jetty Maven Plugin配置官方文档:http://www.eclipse.org/jetty/documentation/current/jetty-maven-plugin.html#maven-config-https 1 ...p…

Python初步

准备在工作之余看看Python的东西 收录一些资料 Python初学者&#xff08;零基础学习Python、Python入门&#xff09;常见问题&#xff1a;书籍推荐、资料、社区 http://blog.csdn.net/xiaowanggedege/article/details/8566606 小甲鱼零基础入门学习Python(全87集) http://pan.b…