HTML----CSS

一：样式

1.行内样式

2.内部样式表

3.外部样式

二：选择器：

1.标签选择器）

2.类选择器

3.ID选择器（

4.后代选择器

5.子选择器

6.直接相邻选择器

7.间接相邻选择器

8.属性选择器

9.公共选择器

10.通配符选择器

11.伪类选择器

12.伪对象选择器

一：样式：

1.CSS 指层叠样式表 (Cascading Style Sheets

2.样式定义如何显示 HTML 元素

3.样式通常存储在样式表中

4.css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

1.行内样式：（在相关的行内标签中使用样式属性）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css行内样式</title></head><body><h3 style="color: #00FF00;">老妹儿04</h3><h3 style="color: #00FF00;">老妹儿05</h3><h3 style="color: #00FF00;">老妹儿06</h3></body>
</html>

2.内部样式表（当单个文件需要特别样式时，就可以使用内部样式表）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css内部样式</title><style type="text/css">/* 内部样式 */h3{color: #00FF00;}</style></head><body><h3>老妹儿04</h3><h3>老妹儿05</h3><h3>老妹儿06</h3></body>
</html>

3.外部样式（必须通过引用外部CSS文件，外部文件扩展名必须是css）

h3{color: green;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css外部样式</title><link rel="stylesheet" type="text/css" href="./css/03.css"/></head><body><h3>老妹儿04</h3><h3>老妹儿05</h3><h3>老妹儿06</h3></body>
</html>

二：选择器：

CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类。

1.标签选择器（标签选择器是指用HTML标记名称作为选择器）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标签选择器</title><style type="text/css">p{color: #ff007f;}</style></head><body><p>桃李不言</p><p>下自成蹊</p><p>你好</p></body>
</html

2.类选择器（类选择器使用 class=" "(英文点号)进行标识，后面紧跟类名）

<head><style>h3 {color: red;font-size: 2em;}.h3 {font-size: 5em;color: brown;}</style>
</head>
<body><h3>你好</h3><h3>中国</h3><h3 class="h3">亲爱的母亲</h3>
</body>

3.ID选择器（id选择器使用‘#’进行标识，后面紧跟id名。）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ID选择器</title><style type="text/css">p {color: #ff007f;}.buzhidao {font-size: 1.875rem;color: #00FF00;}.haha {border-width: 0.0625rem;border-style: solid;border-color: #5b5beb;}#lihaozhe{font-size: 3.75rem;}</style></head><body><p class="buzhidao haha" id="lihaozhe">桃李不言</p><p class="buzhidao haha" id="xuxiaoyu">下自成蹊</p><p>你好</p></body></html>

4.后代选择器（如元素b嵌在元素a内部，b就是a的后代。而且，b的后代也是a的后代，就像一棵大树。）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>后代选择器</title><style type="text/css">ul a{text-decoration: line-through;}</style></head><body><a href="">00</a><ul><a href="">11</a><a href="">22</a><li><span><a href="">33</a></span></li><li><span><a href="">44</a></span></li></ul><a href="">55</a></body>
</html>

5.子选择器（子代选择器使用 ‘>’ 表示，如ul>li{ }，li 是 ul 的子选择器）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>子选择器</title><style type="text/css">ul > a{text-decoration: line-through;}</style></head><body><a href="">00</a><ul><a href="">11</a><li><span><a href="">33</a></span></li><li><span><a href="">44</a></span></li><a href="">22</a></ul><a href="">55</a></body>
</html>

6.直接相邻选择器（相邻选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>直接相邻选择器</title><style type="text/css">#two+p {color: #5B5BEB;background-color: #FF007F;font-size: 1.875rem;}</style></head><body><span><p>老大</p><p id="two">老二</p><p>老三</p><p>老四</p><p>老五</p></span></body></html

7.间接相邻选择器（相邻选择器使用+号表示，如p~a{ }）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>间接相邻选择器</title><style type="text/css">#two~p {color: #5B5BEB;background-color: #FF007F;font-size: 1.875rem;}</style></head><body><span><p>老大</p><p id="two">老二</p><p>老三</p><p>老四</p><p>老五</p></span><p>老六</p></body></html>

8.属性选择器（属性选择器可以为拥有指定属性的 HTML 元素设置样式）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>属性选择器</title><style type="text/css">input[type=text]{width: 37.5rem;height: 18.75rem;}</style></head><body><input type="text" name="" id="" value="" placeholder="请输入账号" /><input type="password" name="" id="" value="" placeholder="请输入密码" /></body>
</html>

9.公共选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>公共选择器</title><style type="text/css">input[type=text],input[type=password]{width: 37.5rem;height: 18.75rem;}input[type=text]{border: 0.0625rem solid #5B5BEB;}input[type=password]{border: 0.0625rem solid #00FF00;}</style></head><body><input type="text" name="" id="" value="" placeholder="请输入账号" /><input type="password" name="" id="" value="" placeholder="请输入密码" /></body>
</html

10.通配符选择器（通配符选择器常用：“ * ” 号表示）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>通配符选择器</title><style type="text/css">* {color: #FF007F;background-color: #dbcdcd;font-size: 1.875rem;}</style>
</head><body><ul><li><a href="">超链接</a></li></ul><p>陈浩楠</p><span>浩楠</span>
</body></html>

11.伪类选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>伪类选择器</title><style type="text/css">/* 什么是伪类？伪类用于定义元素的特殊状态。 */a{text-decoration: none;font-size: 1.875rem;}/* 未访问的链接 */a:link {color: #FF0000;}/* 已访问的链接 */a:visited {color: #00FF00;}/* 鼠标悬停链接 */a:hover {color: #FF00FF;}/* 已选择的链接 */a:active {color: #0000FF;}img:hover{width: 600px;cursor: pointer;box-shadow: 0px 0px 10px 10px #FF0000;}/*鼠标悬浮样式这里我们要用cursor属性cursor 属性规定要显示的光标的类型（形状）。1、default 默认光标(通常是一个箭头)2、auto 默认。浏览器设置的光标。3、crosshair光标呈现为十字线。4、pointer 光标呈现为指示链接的指针(-只手)5、move 此光标指示某对象可被移动。6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。14、text 此光标指示文本。15、wait 此光标指示程序正忙(通常是一只表或沙漏)。16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。*/img:active{border-radius: 50%;}</style></head><body><a href="https://blog.csdn.net/m0_68092999">个人主页</a><img src="../img/1.jpg" width="300px" title="点击进入" ></body>
</html>

12.伪对象选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>伪对象选择器</title><style type="text/css">/*  伪对象选择器伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。伪类和伪对象（元素）的区别伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；伪元素表示DOM 外部的某种文档结构常用伪元素1.E:before/E::before2.E:after/E::after伪元素是在元素内容的前面或后面定义的，必须要添加content:””这个属性，不然伪元素无法定义成功。p::after{ content:"在P 标签元素内容前加了内容"; color: red;}*/input:checked+span{background-color: #00FF00;}input:checked+span::after{background-color: #FF0000;content: 'LOL';}</style></head><body><form action="" method="post"><fieldset><legend>英雄联盟</legend><ul><li><label><input type="radio" name="colour-group" value="0" /><span>蛮王</span></label></li><li><label><input type="radio" name="colour-group" value="1" /><span>诺手</span></label></li><li><label><input type="radio" name="colour-group" value="2" /><span>剑圣</span></label></li></ul></fieldset></form></body>
</html>

HTML----CSS相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
前端之css基础学习（更正版）
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
CSS单位分析及CSS颜色表示法、颜色表（调色板）
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

HTML----CSS

一：样式：

1.CSS 指层叠样式表 (Cascading Style Sheets

2.样式定义如何显示 HTML 元素

3.样式通常存储在样式表中

4.css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

1.行内样式：（在相关的行内标签中使用样式属性）

2.内部样式表（当单个文件需要特别样式时，就可以使用内部样式表）

3.外部样式（必须通过引用外部CSS文件，外部文件扩展名必须是css）

二：选择器：

1.标签选择器（标签选择器是指用HTML标记名称作为选择器）

2.类选择器（类选择器使用 class=" "(英文点号)进行标识，后面紧跟类名）

3.ID选择器（id选择器使用‘#’进行标识，后面紧跟id名。）

4.后代选择器（如元素b嵌在元素a内部，b就是a的后代。而且，b的后代也是a的后代，就像一棵大树。）

5.子选择器（子代选择器使用 ‘>’ 表示，如ul>li{ }，li 是 ul 的子选择器）

6.直接相邻选择器（相邻选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器）

7.间接相邻选择器（相邻选择器使用+号表示，如p~a{ }）

8.属性选择器（属性选择器可以为拥有指定属性的 HTML 元素设置样式）

9.公共选择器

10.通配符选择器（通配符选择器常用：“ * ” 号表示）

11.伪类选择器

12.伪对象选择器

HTML----CSS相关推荐

最新文章

热门文章

HTML----CSS

一：样式：

1.CSS 指层叠样式表 (Cascading Style Sheets

2.样式定义如何显示 HTML 元素

3.样式通常存储在样式表中

4.css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

1.行内样式：（在相关的行内标签中使用样式属性）

2.内部样式表（当单个文件需要特别样式时，就可以使用内部样式表）

3.外部样式（必须通过引用外部CSS文件，外部文件扩展名必须是css）

二：选择器：

1.标签选择器（标签选择器是指用HTML标记名称作为选择器）

2.类选择器（类选择器使用 class=" "(英文点号)进行标识，后面紧跟类名）

3.ID选择器（id选择器使用**‘#’**进行标识，后面紧跟id名。）

4.后代选择器（如元素b嵌在元素a内部，b就是a的后代。而且，b的后代也是a的后代，就像一棵大树。）

5.子选择器（子代选择器使用 ‘>’ 表示，如ul>li{ }，li 是 ul 的子选择器）

6.直接相邻选择器（相邻选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器）

7.间接相邻选择器（相邻选择器使用+号表示，如p~a{ }）

8.属性选择器（属性选择器可以为拥有指定属性的 HTML 元素设置样式）

9.公共选择器

10.通配符选择器（通配符选择器常用 ：“ * ” 号表示）

11.伪类选择器

12.伪对象选择器

HTML----CSS相关推荐

最新文章

热门文章

3.ID选择器（id选择器使用‘#’进行标识，后面紧跟id名。）

10.通配符选择器（通配符选择器常用：“ * ” 号表示）