css选择器使用与实例
css选择器使用与实例
css选择器:
1.元素选择器
z最常见的选择器就是元素选择器: a{}
a{color:blue}
2.选择器分组
h1{},h2{}:例如
h1,h2{color:red}
*{color:blue;
margin: 0px; //内边距
padding: 0px//外边距
} //*通配符,不指定元素,则页面上的所有元素的字体color都为blue
3.类选择器详解
类选择器允许以一种独立与文档的方式来指定样式: .class{}
.div1{color:red}
结合元素选择器:a.class{}
多类选择器:.class.class{}
正常:
this is my page
.p1{color:red}//改变p1的颜色this is my page
.p2{font-size:30px}//改变p2的大小this is my page
.p3{font-style:italic}//改变p3的字体使用.class.class{}
this is my page
.p1{color:red}//改变p1的颜色this is my page
.p2{font-size:30px}//改变p2的大小this is my page
.p1 .p2{font-style:italic}//有p1的颜色、p2的大小还有他自己的字体。【如果要使用.class.class{} 请用空格隔开】4.ID选择器详解
ID选择器类似也类选择器,有些差别,类选择器可以定义多个,而id选择器只有一个,id选择器不能结合: #id{}
#div1{color:red}
5.属性选择器详解:[title]{}
简单的属性选择
[title]{color:apua}
hello
根据具体的属性值选择
除了选择拥有某些元素,还可以进一步缩小范围,只选择有特定属性值的元素
[href="baidu"]{color:red}
属性和属性值必须完全匹配
根据部分属性值选择
[title~="title"]{font-size:30px}//~模糊这里只要有title的属性都可以实现·
6.后代选择器:
后代选择器可以选择作为某个元素后代的元素
this is my web hellopage
p strong{color:fuchsia}
7.子元素选择器:
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素
p1>strong{color:red}
this is my web hellopage
8相邻兄弟选择器:
可选择紧接在另一个元素后的元素,且二者有相同的父元素:h1+p{}
- itme1
- itme2
- itme3
li+li{font-size:50px;color:blanchedalmond;}
用@Resotrce或@Autowired注解实现注入
CSS选择器笔记
CSS选择器笔记 阮一峰整理 参考网址:456 Berea Street 一、基本选择器 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/e41998374.html, { background:#ff0; } https://www.360docs.net/doc/e41998374.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器
实例: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例: p[title] { color:#f00; } div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素
CSS选择器
CSS选择器 1.常用选择器 常用的选择器有类型选择器和后代选择器。 1.1类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1)ID选择器,根据元素ID来选择元素。 前面以”#”号来标志,在样式里面可以这样定义: #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID定义为demoDiv,如:
这个段落字体颜色为红色
最后,用浏览器浏览,我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那个一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。 我们可以改成这样来定义。
CSS选择器的声明与嵌套
CSS选择器的声明与嵌套 使用CSS选择器控制HTML标记的时候,每个选择器的属性可以一次声明多个,选择器本身也可以同时声明多个。 并且,任何形式的选择器,都是合法的,标记选择器,class选择器和ID选择器都可以集体声明。 集体声明 在声明CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以使用集体声明的方式,将风格相同的选择器同时声明。 [html]view plain copy print? 1. 2. 3.
17. 18. 19.
20.集体声明h1
21.集体声明h3
23.集体声明h4
24.集体声明h5
25.集体声明p1 26.集体声明p2 27.
集体声明p3 28. 29. 30. 全局声明 对于实际网站中,如果希望页面中所有的标记都使用同一种CSS样式,但是,又不希望逐个来集体声明,这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1. 2. 3.
实验14 CSS选择器
实验14C S S选择器1.实验目的 (1)掌握在网页上应用CSS的方法。 (2)掌握CSS的基本语法规则。 (3)掌握CSS的常用选择器。 (4)掌握使用Dreamweaver定义CSS的方法。 2.实验内容 定义“网络与信息安全实验教学”网站首页的样式,如图14-1所示。 图14-1 首页效果图
2 3.实验步骤 一.创建“网络与信息安全实验教学”站点 ( 1)将“实验14”文件夹中的syjx 文件夹复制到D 盘; (2)启动Dreamweaver ,使用“站点|新建站点”命令创建“网络与信息安全实验教学”站点,并指定syjx 文件夹为“网络与信息安全实验教学”站点的本地根文件夹。 二.定义“首页”的CSS 样式。 ( 1)在Dreamweaver 中打开index.html 文件。 (2)选择“文件 | 新建”命令,新建CSS 文件,保存在syjx 文件夹中,命名为css.css 。 (3)将文档窗口切换到index.html ,单击CSS 面板上的“附加样式表”按钮,将css.css 作为外部样式表链接到index.html ,如图14-2所示。 图14-2 CSS 面板 ( 4)在css.css 文件中定义首页的样式。 b ody{ background:#f6fafd} /*主体背景颜色*/ a { font-family:"宋体"; /*字体*/(文本样式) font-size:15px; /*文字大小*/ color:#FFFFFF; /*白色*/ text-decoration:none; /*无下划线*/ } .menu{font-weight:bold;} /*加粗*/(导航菜单样式) .new_title{ (标题样式) font-family: "宋体"; font-size: 14px; font-style: normal; color: #FFFFFF; font-weight: bold; 样
CSS选择器的权重与优先规则
CSS选择器的权重与优先规则 2011-06-26 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下: 1.第一等:代表内联样式,如: style=””,权值为1000。 2.第二等:代表ID选择器,如:#content,权值为100。 3.第三等:代表类,伪类和属性选择器,如.content,权值为10。
4.第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113 下面是一些计算示例:
注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。 我们再来看一个具体的例子:假如有以下组样式规则,你能判断出HTML代码中的两个标题是什么颜色吗? 01 #content div#main-content h2{ 02 color:red; 03 } 04 05 #content #main-content>h2{ 06 color:blue 07 } 08 body #content div[id="main-content"] h2{ 09 color:green; 10 } 11 12 #main-content div.paragraph h2{ 13 color:orange; 14 } 15 #main-content [class="paragraph"] h2{ 16 color:yellow; 17 } 18 div#main-content div.paragraph h2.first{ 19 color:pink; 20 } 以下是HTML代码:
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)(DOC)
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上) 我们已经讲了一部分选择器了,今天还要继续讲一些选择器,以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式,比如背景图像,文字间距等,所以我们还讲些样式。通过以下几点介绍: ?关系选择器 ?动态伪类选择器 ?结构性伪类选择器 ?文字属性 ?段落属性 ?背景属性 ?列表属性 好了,我们先来看一下关系选择器 一、关系选择器 1.E F:后代选择器,找到页面中相应的的子元素及孙子及重孙子元素,因为这些元素都是后代元素,我们把标签的第一层嵌套的元素叫子元素,再一层嵌套及以后嵌套的元素及子元素都叫后代元素。(当然也是相对的)。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种,我们先理一下元素之间的层次关系。