HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容
前端的三大组成(三大模块)
HTMl(超文本标记语言) 结构层
css(层叠样式表) 表现层:用来美化HTML结构
JS(Java script)(脚本语言) 行为层:提供用户和界面的交互
二.CSS(层叠样式表)
1. CSS的概念及其介绍
CSS 指层叠样式表 (Cascading Style Sheets)
作用:美化HTML结构,重点:css可以很好的将结构内容和表现进行分离.
2. css的三种表现形式(引入方法)
css的语法结构:选择器{属性:值;属性:值;…}
选择器:选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一 个 或多个值.顾名思义就是用来筛选元素的一种方式.
(1)行内样式(内联样式):通过style属性将样式写入标签中.
例:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
//border-style:solid;设置边框样式为实线// //margin:"auto";设置水平居中//
<div style="width: 200px;height: 200px; border-color: red; border-style: solid; border-width: 5px; margin: auto;"></div>
<div style="width: 1000px; height: 100px; background: red; border-color: green; border-width: 5px; border-style: solid;"></div>
<br />
<div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div>
<div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div>
<p style="background: yellow;">我比你帅</p>
</body>
</html>
(2)内嵌样式:通过style标签将样式写入head标签中.
例:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: url(img/r14.jpg);//插入背景图片//
background-size: 100%,100%;//body要加逗号//
}
a{
text-decoration: none;font-family: 阿美简体;font-weight: 900;font-size: 54px;color: red;
}
p{
width: 200px; height: 50px; background: red;text-align: center;line-height: 50px;
}
div{
width: 400px; height: 200px; border: red solid 2px;
background: url(img/img01.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<a href="#">我的超链接</a>
<p>我爱学习,学习使我快乐</p>
<div></div>
</body>
</html>
(3)外联样式(外部样式):通过link标签引入外部css文件夹中的xxx.css文件到head标签中.
div: 没有具体的含义(主要用来页面的布局中,替代了原始的table和框架布局).
块元素:所谓的块元素会占据一行显示称之为块元素,即便把宽高缩小也会占据一行显示.
3. CSS 文本设置
常用的应用文本的 css 样式：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜， font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗， 如： font-weight:bold; 设 置 加 粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
font：是否加粗字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高，如：line-height:24px; (文本的垂直居中)
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 (overline上划线,underline下划线)
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进 24px
text-align 设置文字水平对齐方式，如 text-align:center 设置文字水平居中
border-collapse: collapse;设置表格边框合并
4.css颜色的三种表现形式
(1).直接写颜色的名称
background:red;
(2).使用RGB三原色设置
background:rgb(76,50,0);
background:rgba(76,50,0,0.8);//a不透明度//
(3).使用16进制的方式表示颜色(最常用的一种)
background:#ff0000
5.css的选择器
(1).标签选择器
(2).ID选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能 对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id选择器.
(3).类选择器(class)
.class的值{属性:属性值}
例:
<style type="text/css">
//标签选择器//
table{
border: 5px solid black;
width: 300px;
height: 200px;
margin:100px auto; //设置表格的水平居中// //距离顶端100px 然后水平居中//
border-collapse: collapse; //设置表格的边框合并//
background: url(images/bg3.jpg);
background-size: 100% 100%;
}
td{
border: 2px dashed green;
color: red;
font-family: 宋体;
font-size: 24px;
}
//id选择器//
#inp1{
background: pink;
border: 5px solid black;
width: 150px;
height: 20px;
}
#inp2{
background: white;
border: 5px solid black;
width: 150px;
height: 20px;
}
#ipn3{
background: goldenrod;
border: 5px solid black;
width: 150px;
height: 30px;
font-family: 阿美简体;
font-size: 15px;
color: white;
}
label{
text-align: right;
/*border: 1px solid green;*/
}
//类选择器//
.td1{
text-align: right;
}
</style>
<body>
<form method="get">
<table>
<tr>
<td class="td1">
<label>姓名:</label>
</td>
<td>
<input id="inp1" type="text" placeholder="请输入用户名" />
</td>
</tr>
<tr>
<td class="td1">
<label>密码:</label>
</td>
<td>
<input id="inp2" type="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td></td>
<td>
<input id="ipn3" type="button" value="点击登录" />
</td>
</tr>
</table>
</form>
</body>
层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元 素 结合使用，减少命名，同时也可以通过层级，防止命名冲突。
(4)子代选择器:父级元素1>子集元素2
(5)后代选择器:父级元素 后代元素 后代元素
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
//子代选择器//
#ul_01>li{
background: red;
}
#ul_01>li>ul{
background: yellow;
}
#ul_01>li>ul>li{
background: pink;
}
//后代选择器//
#ul_01 a{
text-decoration: none;
}
#ul_01 li{
list-style: none;//去掉无序列表的点//
} #ul_01 li ul li{
background: greenyellow;
}
#ul_01>li ul a{
color: red;
}
</style>
</head>
<body>
<ul id="ul_01">
<li><a href="#">首页</a></li>
<li><a href="#">数码产品</a></li>
<li><a href="#">家用电器</a></li>
<p><a href="#">学的不仅是技术</a></p>
<li>
<a href="#">其他类型</a>
<ul>
<li><a href="#">童装</a></li>
<li><a href="#">男装</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">时尚装</a></li>
</ul>
</li>
</ul>
</body>
</html>
(6)组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
例:
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">.........</div>
<div class="box2">.........</div>
<div class="box3">.........</div>
(7)伪类及伪元素选择器
常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容
例:
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">.........</div>
<div class="box2">.........</div>
<div class="box3">.........</div>
HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）的更多相关文章
- （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
- jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
jQuery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) , 它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safa ...
- [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
reference : http://www.suyunyou.com/aid1657.html jQuery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后 ...
- HTML+CSS教程（一）简介及其基本标签的使用方法
一.前端 HTML(结构):HyPer TEXT Markup LanguageCSS(样式): 样式就是对于结构的一种美化JavaScript(js: 行为/ 提供了用户和界面的交互方式)jQuer ...
- HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出
一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...
- css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
随机推荐
- 震惊！程序员的福音！不需要敲代码就能完成复杂的逻辑应用？ —— Azure Logic App
(大家看完标题可能以为是营销号,哈哈哈哈哈哈哈哈哈...客官请留步, 正经博主....好吧) 今天我们的主题是Azure Logic Apps Azure Logic Apps 是什么? 官方解释:h ...
- Redis数据结构——quicklist
之前的文章我们曾总结到了Redis数据结构--链表和Redis数据结构--压缩列表这两种数据结构,他们是Redis List(列表)对象的底层实现方式.但是考虑到链表的附加空间相对太高,prev 和 ...
- Git使用的一些问题：.gitignore规则不生效、git同步代码至github和gitee
Git忽略规则及.gitignore规则不生效的解决办法 .gitignore 的基本使用 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件 ...
- jmeter响应乱码（十四）
方法一: jmeter响应乱码解决方法:在jmeter的bin目录下找到jmeter.propertis这个文件,修改里面的#sampleresult.default.encoding=ISO-885 ...
- 通过ISAPI http协议控制海康摄像头
一直用海康的SDK进行摄像头控制,但有时候非常不灵活,必须有X86的主机,在嵌入式上面就不行,通过写一个HTTPCLIENT可以通过ISAPI来控制海康的摄像头. 代码如下:git@github.co ...
- 基于zookeeper实现分布式锁和基于redis实现分布所的区别
1,实现方式不同 zookeeper实现分布式锁:通过创建一个临时节点,创建的成功节点的服务则抢占到分布式锁,可做业务逻辑.当业务逻辑完成,连接中断,节点消失,继续下一轮的锁的抢占. redis实现分 ...
- python学习要点（一）
我的个人博客排版更舒服: https://www.luozhiyun.com/archives/264 列表和元组 列表是动态的,长度大小不固定,可以随意地增加.删减或者改变元素(mutable). ...
- @Configuration和@Bean 配置类注入
@Configuration和@Bean 1. 概述 @Configuration 注解标记在类上, 就像下面的配置文件. 我们将该类成为配置类. <?xml version="1.0 ...
- CAS单点登录系列之极速入门于实战教程(4.2.7)
@ 目录 一. SSO简介 1.1 单点登录定义 1.2 单点登录角色 1.3 单点登录分类 二. CAS简介 2.1 CAS简单定义 2.2 CAS体系结构 2.3 CAS原理 三.CAS服务端搭建 ...
- 家庭记账本app进度之关于单选按钮的相关操作（添加点击按钮事件以及点击单选更改事件）
这次主要是通过代码实现了android中的相关单选按钮的相关操作,之后再最下面有一个按钮,当点击这个按钮的时候,会获取当上面的相关信息,之后再下方会进行相应的文字显示,获取的信息不同显示的信息也不会一 ...