CSS课程讲解(选择器)

一.回顾内容
1.前端的三大组成(三大模块)
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.页面中元素背景图片的设置

 background-image: url(图片的路径);默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。

例：

background: url(img/link06.jpg);

background-repeat：repeat-x 横向平铺盒子

background-repeat：repeat-y 纵向平铺盒子
background-repeat：no-repeat 背景不重复，背景和盒子左上角对齐

background:cyan url(bg.jpg) no-repeat left center，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。
6.表格的样式属性

（1）border-collapse: 表示设置表单的边框单一;

border-collapse: collapse;

（2）border-spacing: 设置单元格与单元格之间的距离

border-spacing: 20px;

（3）caption-side: 设置表格标题的位置

empty-cells: hide;

（4）empty-cells: 设置是否要显示表格中空单元格

caption-side: bottom;

（5） table-layout: 设置显示单元、行和列的算法

table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed}

7.css的选择器
(1).标签选择器
通过元素的标签名称来选择
(2).ID选择器
#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>

CSS课程讲解(选择器)相关推荐

Javaweb 第1天 HTML和CSS课程
HTML和CSS课程今日大纲 ● 了解Java Web开发 ● HTML常用标签 ● CSS的使用 ********************************************** ...
可以对同一个html元素定义不同的样式,CSS的多种选择器的使用.ppt
什么是样式选择器是样式选择器当定义一条样式规则时必须指定受这条样式规则作用的网页元素在一条规则中定义的网页元素就是选择器也就是选择该样式规则作用于的网页元素选择器有标签就用选择器选择符就是赋予内部或外 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS系列讲解-总目录
总目录: 欢迎来到孙叫兽的<CSS系列讲解>,蓝色字体为传送门,点击进入即可.本专栏已完结,大前端专栏支持更新. 玩转CSS系列: 什么是CSS?你真的理解? CSS页面DEMO CSS基 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
零基础学习CSS(10)——属性选择器
官方资料鱼C课程案例库:https://ilovefishc.com/html5/ html5速查手册:https://man.ilovefishc.com/html5/ css速查手册:https ...
小奶狗给小喵咪上CSS课程
小奶狗给小喵咪上CSS课程小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...
CSS样式----标记选择器
一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...
CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

CSS课程讲解(选择器)

CSS课程讲解(选择器)相关推荐

最新文章

热门文章