大连网站建设开发,旅游网站建设网站,jsp两种网站开发模式,域名租赁网站目录 内容回顾#xff1a;
CSS选择器***
属性选择器
伪类选择器 1#xff09;:link 超链接点击之前 2#xff09;:visited 超链接点击之后 3#xff09;:hover 鼠标悬停在某个标签上时 4#xff09;:active 鼠标点击某个标签时#xff0c;但没有松开 5#xff09;:fo…目录 内容回顾
CSS选择器***
属性选择器
伪类选择器 1:link 超链接点击之前 2:visited 超链接点击之后 3:hover 鼠标悬停在某个标签上时 4:active 鼠标点击某个标签时但没有松开 5:focus 某个标签获取焦点时的状态
部分伪类选择器样例示范 checked
first-child
last-child
nth-child(n)
案例实现表格隔行变色效果。
伪元素选择器
伪元素的运用案例
常见样式
基本语法
常见样式
编写样式index.css
编写页面index.html 内容回顾 CSS的几种写法 1.行内样式 2.内嵌样式 3.外链样式 4.import CSS选择器*** 在CSS中对于元素的修饰是通过选择器来获取到的它有很多选择器。 ---基本选择器 ---包含选择器 ---属性选择器 ---伪类选择器 CSS选择器***
属性选择器
由于在HTML中标签的属性是很重要的元素所以CSS中也提供了直接可以通过标签属性的方式来获取元素。属性选择是在使用过程需要使用到中括号[ ]
举例示范
!DOCTYPE html
html langen
head meta charsetUTF-8 title属性选择器/title style /* 需求1获取页面中所有带有 class 属性的元素 */ [class] { color: blueviolet; } /* 需求2获取带有 class 属性并且值为 container 的元素 */ .container[class] { color: white; background-color: blue; } /* 需求3获取页面中所有 div 且带有 title 属性的元素 */ div[title] { margin-top: 5px; margin-bottom: 5px; border: 1px solid #0000ff; } /* 需求4获取页面中所有 input 元素且有 type 属性的同时这个属性的值必须是
text 的所有元素 */ input[typetext] { color: red; border: 1px solid blue; } /* 需求5获取所有 input 元素的 type 属性的值中包括字母 e 的所有元素 */ input[type*e] { background-color: aquamarine; } /* 需求6获取type属性的值中以字母 e 开头的所有元素 ^ 这个指的是开头 */ input[type^e] { border: 1px dotted orange; outline: none; } /* 需求7获取 type 属性的值中以 rl 结尾的所有元素 $ 这个指的是结尾 */ input[type$rl] { color: brown; } /* 需求8通过类样式为 msg 元素来获取它的下一个元素 p p 获取什么元素就用 相应的元素 */ div.msg p { border: 1px solid #ff0000; background-color: orange; } /style
/head
body
div classcontainer这是一个容器/div
p第一个段落/p
p第二个段落/p
div title这是标题这是第二个容器/div
input typetext namecompany value西安鸥鹏
input typeurl nameurl valuewww.xianoupeng.com
input typeemail nameemail valuelixianoupeng.com
hr
div classmsg这是个人信息/div
p idmsg2第三个段落/p
/body
/html 属性选择器说明
1.要使用属性选择器必须合适中括号
2.可以直接使用属性也可以使用属性名 “属性值”的方式
3.还可以使用包含*、以什么开头^、以什么结尾$的方式来获取
4.加号表示某个元素之后紧跟着的第一个元素 伪类选择器
同一个标签在不同的状态下它具有不同的样式这就叫伪类样式。伪类选择器使用冒号来表示。
常见的状态主要有以下几种 1:link 超链接点击之前 2:visited 超链接点击之后 3:hover 鼠标悬停在某个标签上时 4:active 鼠标点击某个标签时但没有松开 5:focus 某个标签获取焦点时的状态
举例示范
!DOCTYPE html html langen head meta charsetUTF-8 title伪类选择器/title style /* 超链接点击之前的颜色 */ a:link { color: orange; } /* 超链接点击之后的颜色 */ a:visited { color: brown; } /* 鼠标移动到元素上的效果注意不能移开鼠标 */ a:hover { text-decoration: none; } /* 按住鼠标不松开的效果 */ a:active { color: red; } /* 元素获取焦点的效果 */ input[type]:focus { border: 1px solid #ff0000; outline: none; } /style /head body a hrefhttp://www.baidu.com target_blank百度/a a hrefhttps://www.taobao.com target_blank淘宝/a br input typetext namename /body /html 页面显示如下 部分伪类选择器样例示范 在CSS中伪类选择器有很多 checked
这个伪类选择器是用于获取所有选中的元素。 first-child
选择器匹配属于任意元素的第一个子元素的元素 last-child
选择所有指定元素的最后一个子元素 nth-child(n)
选择所有p元素的父元素的第二个子元素
!DOCTYPE html
html langen
head meta charsetUTF-8 title:nth-child/title style * { padding: 0; margin: 0; } ul { list-style: none; /*去掉小圆点*/ } ul li { width: 200px; height: 25px; background-color: orange; margin-top: 2px; padding-left: 5px; } /* ul li:first-child li { color: white; }*/ /* 奇数行为白色 */ ul li:nth-child(odd) { color: white; } /* 偶数行为兰色 */ ul li:nth-child(even) { color: blue; } /style
/head
body
ul li1/li li2/li li3/li li4/li li5/li li6/li
/ul
/body
/html 案例实现表格隔行变色效果。 案例代码
!DOCTYPE html
html langen
head meta charsetUTF-8 title表格隔行变色/title style table { width: 500px; border-left: 1px solid #000000; border-top: 1px solid #000000; border-collapse: collapse; } td,th { border-right: 1px solid #000000; border-bottom: 1px solid #000000; text-align: center; } tr:nth-child(odd) { background-color: #cccccc; } tr:first-child { background-color: grey; } /style
/head
body
table tr th编号/th th姓名/th th年龄/th th操作/th /tr tr td1/td td2/td td3/td td4/td /tr tr td5/td td6/td td7/td td8/td /tr tr td9/td td10/td td11/td td12/td /tr tr td13/td td14/td td15/td td16/td /tr tr td17/td td18/td td19/td td20/td /tr tr td21/td td22/td td23/td td24/td /tr
/table
/body
/html 伪元素选择器
在CSS3中出现了伪元素选择器我们常用的有两个 --- ::before 它是在元素的内容之前添加前前缀内容 --- ::after 它是在元素的内容之后添加后缀内容 伪元素的运用案例 代码实现 !DOCTYPE html html langen head meta charsetUTF-8 title伪元素选择器运用/title style .container { width: 300px; height: 200px; background-color: #0B133A; border: 2px solid #243A64; position: relative; } .container img { height: 200px; width: 300px; overflow: hidden; } .container::before { content: ; width: 10px; height: 10px; border-left: 2px solid #317FE5; border-top: 2px solid #317FE5; position: absolute; left: -2px; top: -2px; } .container::after { content: ; width: 10px; height: 10px; border-top: 2px solid #317FE5; border-right: 2px solid #317FE5; position: absolute; right: -2px; top: -2px; } .footer { width: 100%; height: 10px; position: absolute; left: 0; bottom: 0; } .footer::before { content: ; width: 10px; height: 10px; border-left: 2px solid #317FE5; border-bottom: 2px solid #317FE5; position: absolute; left: -2px; bottom: -2px; } .footer::after { content: ; width: 10px; height: 10px; border-right: 2px solid #317FE5; border-bottom: 2px solid #317FE5; position: absolute; right: -2px; bottom: -2px; } /style /head body div classcontainer img srcimage/5.jpeg div classfooter/div /div /body /html 常见样式 基本语法
CSS的样式编写的基本语法如下 注意每一个属性值后要用分号结束属性与属性值之间要用英文冒号分割。 常见样式
以下以案例的方式给讲解样式编写。
页面效果 编写样式index.css * { margin: 0; /* 去掉元素的外边距表示上、右、下、左都为 0 */ /** 有以下几种写法 margin: 0 5px; 表示上下外边距为0左右外边距为 5px margin: 1px 2px 5px; 表示上为 1px左右为 2px 下为 5px */ margin: 1px 2px 3px 4px; 表示上为 1px右为 2px下为 3px左为 4px */ padding: 0; /* 去掉元素的内边距即元素内容和元素的边框之间的距离当只有一个值时表示 上、右、下、左都一样 */ } a { */ font-family: 微软雅黑; /* 设置字体 */ font-weight: normal; /* 设置文字粗细 */ font-size: 14px; /* 设置文字大小 */ text-decoration: none; /* 去掉链接的下划线 */ /*color: #333333;*/ color: rgb(3, 3, 3); /*color: rgba(3,3,3, .8);*/ opacity: 0.9; /* 设置透明度它的值在 0 ~ 1 之间0 表示完全透明1表示完全不透明 } a:hover { color: #C44F00; text-decoration: line-through; } .container { width: 900px; height: 500px; background-color: #cccccc; margin: auto; /* 设置容器居中显示 */ 编写页面index.html } .top { width: 100%; /* 设置宽度值可以是数字也可以是百分比如果是百分比那么它的父组元 素一定要有值 */ height: 60px; /* 定义容器的高度当值为 0 时可以不带单位如果值为非 0 则必须带单 位 */ /*border: 1px solid red;*/ /* 定义边框样式*/ } .top .nav { width: 100%; height: 100%; background-color: #eeeeee; position: relative; /* 相对定位 */ } /* 定义logo 样式 */ .nav img { width: 60px; /* 设置logo图片宽度为 30px */ padding-left: 10px; /* 定义左内边距 */ } .nav .title-nav { width: 90%; height: 100%; /*background-color: #317FE5;*/ float: right; /* 定义浮动它的值由 left、center 和 right */ } ul.nav-first { height: 100%; list-style: none; /* 去掉无序列表的默认样式 */ } ul li { width: 90px; height: 100%; float: left; text-align: center; /* 定义文字水平居中 */ line-height: 60px; /* 定义内容的行高 */ margin-right: 5px; /* 右外边距为 5px */ } .content { width: 100%; height: 380px; padding: 10px; text-indent: 30px; /* 设置起始文字缩进 */ background-color: white; } .footer { width: 100%; height: 40px; text-align: center; background-color: #cccccc; }
编写页面index.html !DOCTYPE html html langen head meta charsetUTF-8 title常见样式/title link relstylesheet hrefcss/index.css /head body div classcontainer div classtop div classnav img srcimage/logo.png/ div classtitle-nav ul classnav-first lia href#郑大内网/a/li lia href#郑大内网/a/li lia href#郑大内网/a/li lia href#郑大内网/a/li lia href#郑大内网/a/li lia href#郑大内网/a/li lia href#郑大内网/a/li lia href#郑大内网/a/li /ul /div /div /div div classcontent 中新网2月20日电 据香港《明报》报道澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启被
视为“城中钻石笋盘”家底丰厚兼遗传了赌王的帅气。2018年农历新年他公布向内地女友GiGi求婚成
功随后传媒追问他有关婚礼的安排却低调避谈。 /div div classfooter div classmsg刘建宏是个帅哥/div div classbox/div /div /div /body /html
