实现CSS四种方式和选择器介绍

2020-03-24 17:49:24

字体：大中小

来源：转载

供稿：网友

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=”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=”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=”1.css” media属性可选，默认设备屏幕/ 10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 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?1.1.11 第三种方式 -- 34 !-- 第四种 link -- 35 link rel= stylesheet href= div.css?1.1.11 type= text.css?1.1.11 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=”1.css” media属性可选，默认设备屏幕/ 60 61 -- 62 !-- -- 63 64 65 !-- 样式的重叠重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -- 66 !-- color: #F00 为颜色的缩写 -- 67 div style = color: #F00 这是一个div区域1 /div 68 div >

五、代码二

!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= 1.css?1.1.11 type= text/css /-- style type= text/css /*@import url(1.css); 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标签中
独孤九贱(5)_ThinkPHP5视频教程

ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《VeVb.com独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...