CSS的三种使用方式以及常用的选择器

一、CSS的三种使用方式:

1. 内联样式
             * 在标签内使用style属性指定css代码
             * 如:<div style="color:red;">hello css</div>
2. 内部样式
            * 在head标签内,定义style标签,style标签的标签体内容就是css代码
            * 如:
                <style>

                    div{


                        color:blue;


                    }


                </style>

                <div>hello css</div>
3. 外部样式
            1. 定义css资源文件。
            2. 在head标签内,定义link标签,引入外部的资源文件
            * 如:
                * a.css文件:
                    div{

                        color:green;

                        }
                    <link rel="stylesheet" href="css/a.css">
                    <div>hello css</div>
                    <div>hello css</div>

二、CSS的常用选择器:

1. 基础选择器
                1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
                    * 语法:#id属性值{}
                2. 元素选择器:选择具有相同标签名称的元素
                    * 语法: 标签名称{}
                    * 注意:id选择器优先级高于元素选择器
                3. 类选择器:选择具有相同的class属性值的元素。
                    * 语法:.class属性值{}
                    * 注意:类选择器选择器优先级高于元素选择器
2. 扩展选择器:
                1. 选择所有元素:
                    * 语法: *{}
                2. 并集选择器:
                    * 选择器1,选择器2{}
                
                3. 子选择器:筛选选择器1元素下的选择器2元素
                    * 语法:  选择器1 选择器2{}
                4. 父选择器:筛选选择器2的父元素选择器1
                    * 语法:  选择器1 > 选择器2{}

5. 属性选择器:选择元素名称,属性名=属性值的元素
                    * 语法:  元素名称[属性名="属性值"]{}

6. 伪类选择器:选择一些元素具有的状态
                    * 语法: 元素:状态{}
                    * 如: <a>
                        * 状态:
                            * link:初始化的状态
                            * visited:被访问过的状态
                            * active:正在访问状态
                            * hover:鼠标悬浮状态

原文地址:https://www.cnblogs.com/iceywu/p/12304992.html

时间: 2024-08-21 17:26:17

CSS的三种使用方式以及常用的选择器的相关文章

DAY44-前端入门-css的三种引用方式以及优先级、样式与长度颜色、常用样式、css选择器

目录 一.css的三种引用方式 行间式 内联式 外联式 二.三种引入的优先级 三.样式与长度颜色 基本样式 长度 颜色 四.常用样式 字体样式 文本样式 背景样式 五.css选择器 基础选择器 基础选择器优先级 组合选择器 组合选择器优先级 属性选择器 一.css的三种引用方式 行间式 1.在标签头部的style 2.属性值是css语法 3.属性值用Key:value形式赋值,value具有单位 4.属性值之间用;隔开 <div style='width:100px;height=100px;b

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

CSS的三种定位方式介绍(转载)

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式relative相对定位,相对于原来的位置,但是原来的位置仍然保留absolute定位,相对于最近的非标准刘定位,原来的位置消失,被后边的位置所顶替 下面先演示相对定位的案例 [html] view plain copyprint? <!DOCTYPE html> <html> <head> <

css的三种导入方式

内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type="text/css"> p{ font-size: 100px; color: red; } </style> <p>css内部样式表</p> 外部样式表 创建一个cssTest.css的css文件 p{ font-size: 50px; colo

CSS层叠规则(即引入CSS的三种不同方式的优先级)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type"

redis的三种启动方式,个人常用第二种

redis的启动方式1.直接启动  进入redis根目录,执行命令:  #加上'&'号使redis以后台程序方式运行 1 ./redis-server & 2.通过指定配置文件启动  可以为redis服务启动指定配置文件,例如配置为/etc/redis/6379.conf  进入redis根目录,输入命令: 1 ./redis-server /etc/redis/6379.conf #如果更改了端口,使用`redis-cli`客户端连接时,也需要指定端口,例如: 1 redis-cli -

css中三种隐藏方式

1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black  显示 display:none  隐藏 3.visibility 隐藏占据原来的文档,不会让出原来所占的空间. visibility:hidden 隐藏 visibility:visible 显示

python全栈开发day37-css三种引入方式、基础选择器、高级选择器、补充选择器

一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显示,不能放置容器类(块)的盒子 (4)宽高不能设置 (5)宽高跟span的内容相关 a: (1)文本级标签 (2)不能设置高和宽 (3)超链接href:连接资源 title 鼠标的悬浮时的标题 跳转顶部top: <div id= 'top'> <div> ....... <a h

前端-CSS-介绍及三种引入方式

我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什么是CSS? CSS是指层叠样式表(Cascading Style Shee