首页 > 代码库 > CSS实现和选择器

CSS实现和选择器

2024-09-29 23:57:39   220人阅读

CSS实现和选择器

本课内容：

一、实现CSS四种方式

1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)
2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
<style type=”text/css”>@import url(“1.css”);</style>
4，通过HTML头标签中的link标签链接一个CSS文件
<link rel=”stylesheet” href=http://www.mamicode.com/”1.css” media属性可选，默认设备屏幕/>


二、选择器


标签选择器 div{}
类选择器 .haha
id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)
类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高

 

三、CSS笔记

css：将网页内容和显示样式进行分离，提高了显示功能。

 

CSS层叠样式表cascading style sheets

       将网页中的样式单独分离出来，完全由CSS控制，增强样式复用性和扩展性。

格式：选择器{属性名：属性值；属性名：属性值；……}

CSS与HTML结合的4中方式：

1、每个HTML标签都有style属性

2、当页面中有多个标签具有相同样式时，可定义style标签封装样式以复用

       <style type=”text/css”>css代码</style>

3、当多个页面使用相同样式时，可将样式单独封装为CSS文件导入

       <style type=”text/css”>@import url(“1.css”);</style>

4、通过HTML头标签中的link标签链接一个CSS文件

       <link rel=”stylesheet” href=http://www.mamicode.com/”1.css” media属性可选，默认设备屏幕/>

技巧：为提高样式的复用性和可扩展性，将多个样式单独定义并封装为CSS文件，如p.css、div.css……在一个总的CSS文件中，使用import导入这些CSS文件，然后在HTML页面中用link标签将这个总的CSS文件导入即可。

优先级：就近原则       标签上设置的style属性可以覆盖其他样式

 

选择器：

1、标签选择器：每个HTML标签名即为一个选择器

2、类选择器：标签中的class属性指定   定义样式要加点  js引用时用className

3、ID选择器：标签的id属性，尽量保证唯一，便于JavaScript获取元素

4、扩展选择器：

       a、关联选择器：标签中的标签  table div表示表格中的div区域

       b、组合选择器：多个选择器     逗号分隔

       c、为元素选择器：元素的状态 如超链接的默认状态、点击状态、悬停状态等

                     a:link      a:visited         a:hover           a:active   LVHA顺序

                     删除超链接默认下划线：text-decoration：none

                     p:first-letter    p:first-line             focus:IE6不支持

CSS滤镜：通过一些代码丰富了的样式

网页设计时，DIV+CSS

       DIV和P标签都属于行级区域，回车效果，SPAN标签为块级区域，无回车效果

       可加border、color等属性，P标签中不要嵌套DIV标签

 

四、代码一

 1 <!--
 2 本课内容：
 3 一、实现CSS四种方式
 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)
 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
 7     <style type=”text/css”>@import url(“1.css”);</style>
 8 4，通过HTML头标签中的link标签链接一个CSS文件
 9     <link rel=”stylesheet” href=http://www.mamicode.com/”1.css” media属性可选，默认设备屏幕/>>10 二、选择器
11 标签选择器 div{}
12 类选择器 .haha
13 id选择器 #qq  (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)
14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高 
15  -->
16 <!DOCTYPE html>
17 <html>
18 <head>
19 <meta charset="UTF-8">
20 <title>Insert title here</title>
21 <!-- type指定下面的css以什么方式解析 -->
22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->
23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->
24 <!--
25 第二种方式：
26 标签选择器
27 div{
28         background-color: #000;
29         color: #FFF    
30     }
31 
32  -->
33 <!-- @IMPORT url("div.css");第三种方式 -->
34 <!-- 第四种 link -->
35 <link rel="stylesheet" href="div.css" type="text.css">
36 <style type="text/css">
37 /*
38     @IMPORT url(1.css);
39     @IMPORT url(div.css);
40 @IMPORT url(span.css);
41 */
42 div.haha{
43     background-color: #000;
44 }
45 </style>
46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->
47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->
48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->
49 <!-- 按钮加多套这样的.haha实现动态样式 -->
50 </head>
51 <body>
52     <!--
53     css和html相结合的第一种方式
54     1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)
55     2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
56     3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
57     <style type=”text/css”>@import url(“1.css”);</style>
58     4，通过HTML头标签中的link标签链接一个CSS文件
59     <link rel=”stylesheet” href=http://www.mamicode.com/”1.css” media属性可选，默认设备屏幕/>>60 
61      -->
62      <!--  -->
63 
64 
65     <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->
66     <!-- color: #F00 为颜色的缩写 -->
67     <div style ="color: #F00">这是一个div区域1</div>
68     <div class="haha">这是一个div区域2</div>
69     <span>span区域1</span>
70     <span>span区域2</span>
71     <p>这是一个段落1</p>
72     <p>这是一个段落2</p>
73 
74     
75 </body>
76 </html>

 

 

五、代码二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<!--link rel="stylesheet" href="http://www.mamicode.com/1.css" type="text/css" /-->

<style type="text/css">
/*@import url(1.css);

div{
        background-color:#09F;
        color:#FFF;
}
.haha{
    background-color:#FF3;
    color:#0C0;
}*/
/*预定样式，实现动态的加载。
.hehe{
    background-color:#C93;
    color:#00F;
}*/
/*
#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
    background-color:#000;
    color:#FFF;
}
*//*
span b{关联选择器 选择器中的选择器
    background-color:#09F;
    color:#FFF;
}
*/

/*组合选择器*/
/*
.haha,div b{对多种选择器进行相同样式定义
    background-color:#000;
    color:#C00;
}
*/
/*
伪元素

超链接的状态。

*/

/*未访问*/
a:link{
    background-color:#06F;
    color:#FFF;
    text-decoration:none;
    font-size:18px;
}


/*
鼠标悬停
*/
a:hover{
    background-color:#FFF;
    color:#F00;
    font-size:24px;
}


/*点击效果*/
a:active{
    background-color:#000;
    color:#FFF;
    font-size:36px;
}

/*访问后效果*/

a:visited{
        background-color:#FF9;
        color:#000;
        text-decoration:line-through;
}


p:first-letter{
        font-size:36px;
        color:#F00;
}

div:hover{
        background-color:#F00;
        color:#FFF;
}

input:focus{
    background-color:#09F;
}


#qq{
    float:left;
}
/*

L  V  H  A

*/
</style>

</head>

<body>


<input type="text" />
<input type="text" />
<hr />

<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

<hr />

    <!--
    css和html相结合的第一种方式。
    1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。 
    2，使用style标签的方式。 一般都定义在head标签中
    
    
    优先级：
    标签选择器<类选择器<id选择器<style属性
    
    -->

        <div id="qq">这是一个div<b>区域</b>1</div>
        <div class="haha" id="qq">这是一个div区域2</div>
        <span>span<b>区域</b>1</span>
        <span class="haha">span区域2</span>
        <p>这是一个段落1</p>
        <p class="haha">这是一个段落2</p>

</body>
</html>

 

CSS实现和选择器


联系
我们