html添加css——样式选择器

如何给html添加样式。两种方法:

一、新建立一个css样式表,与原html同目录,然后通过link标签链接。如:<link type="text/css" rel="stylesheet" href="lounge.css">(link标签是一个void元素,无结束标签。)

二、直接在html源码中使用style标签。如:<style>样式</style>,style标签嵌入head中。

html中插入style,则会涉及到五种样式选择器。

1、元素选择器,给某一元素添加样式

如下:p元素与h1元素内的文本应用大括号内的样式

<style>

p,h1{color:grey;

background-color:red;

font-family:sans-serif;}

</style>

2、类选择器,class属性

<style> 标签中创建一个名为 blue-text 的CSS类,然后将类应用于HTML元素。

如:

<style>

.blue-text{color:black;}

</style>

<p class="blue-text">

注意,在CSS样式元素中,类选择器应该添加.为前缀。而在HTML元素的类声明中,类属性不能添加.为前缀。

类选择器不一定只针对某一标签,只要元素应用了class标签,则就使用此css类。

3、id属性设置样式

与class类似,为元素定义一个id,给id创建一个声明。例:

<p id="important"></p>

<style>

#important{color:black;}

</style>

注意:与class不同的是,在css样式元素中,应添加#为前缀,html中没有前缀。一个id对应一个css属性。

4、属性选择器,选择某个元素应用样式

如:*[title]{color:red;}

所有包含title属性的元素都可应用以上样式。

5、后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

举例来说,如果希望只对 h1 元素中的 em 元素应用样式,可以这样写:

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

p>em{color;red;}表示紧挨着p的em元素使用此样式。p+em{}与p元素紧邻的em元素使用此样式。h1+p{}h1后面紧邻的p应用此样式。
时间: 2024-10-13 16:10:27

html添加css——样式选择器的相关文章

HTML常用标签及CSS样式选择器

HTML常用标签及CSS样式选择器 html部分 <!DOCTYPE html> <html> <head> <!--头标记 写描述性的信息(css\javaScript)--> <!--引入外部的样式文件 rel:relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间的关系 --> <link rel="stylesheet" type="text/css" href=&

我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容效果,很大程度上取决于Ta本人,也就是原材料,对网页来说,原材料就是html标签,因此设计优秀的html标签结构十分重要. 整容医生的作用也至关重要,割双眼皮,整容医生的基本功,不同医生割出来的效果不同. 作为一个网页设计师,我们是不是应该追求完美,尽最大努力,让网页漂亮一些. 我知道,我们往往自称

JS实战 &#183; 仿css样式选择器

代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>仿css样式选择器</title> <style type="text/css"> #textid{ height: 100px; width: 300px; } #fontid{ heig

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,

CSS样式选择器

1 <!-- 2 css样式选择器 3 HTML选择器 4 类选择器 5 ID选择器 6 关联选择器 7 组合选择器 8 伪元素选择器 9 10 selector{ /* selector是样式选择器 11 property:value; /* color:red; 12 property:value; /* font-size:4cm; 13 ..... 14 } 15 16 selector当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是select

动态为页面添加CSS样式文件引用

动态为页面添加CSS样式文件引用: 1 if (document.createStyleSheet) { //IE 2 document.createStyleSheet("./Themes/Default/MessageTip.css"); 3 } 4 else { //Firefox, Chrome 5 var stylesheet = document.createElement("link"); 6 stylesheet.href = "./The

javascript动态添加css样式

查看demo:http://koringz.github.io/addcssstyle/ css的cssstylesheet方法有哪些属性和方法,首先我们是console.log(style.sheet). 当我们知道了style具有这些方法的时候,我们可以用一个函数输出一次获得的css属性方法. function addCss () { var sty = document.createElement('style'); var h2 = document.getElementsByTagNa

使用JavaScript动态添加CSS样式规则

原文链接: Add Rules to Stylesheets with JavaScript原文日期: 2014-09-04翻译日期: 2014-09-05翻译人员: 铁锚 现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 我们通过 事件代理(event delegation) 让事件监听更高效, 我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考: 如何防止事件函数的高频触发(中文翻译)

Vue为v-html中标签添加CSS样式

在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-html='msgHtml'></div> </template> <script> export default{ data(){ return { msgHtml: "<p>https://www.cnblogs.com/yunspider/&l