建设电影网站代码,唐山网站建设怎么样,知名做网站费用,代理彩票网站做链接华子目录 选择器并集选择器后代选择器子代选择器伪类选择器伪元素选择器结构选择器属性选择器相邻选择器 表单#xff08;form#xff09;label标签 表格#xff08;table标签#xff09;合并单元格 选择器
下面是我们之前学习过的选择器
*{}#xff1a;通配符选择器formlabel标签 表格table标签合并单元格 选择器
下面是我们之前学习过的选择器
*{}通配符选择器选择网页里面的所有元素
.class名{}:类选择器选择网页里面所有带有classxxx的标签元素
#id名{}:id选择器选择网页里面带有idxxx的标签元素
标签名{}:标签选择器选中网页里的所有这个标签下面是选择器补充
ul,li{}:并集选择器一次性可以选择多个目录以逗号隔开相当于两者都是一样的规则
.msg p{}:后代选择器选择.msg里面的所有p标签以空格隔开
.msg p{}:子代选择器选择msg里面子元素中的p标签孙子曾孙不选亲儿子元素孙子和重孙都不归他管并集选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titlePractise/titlestyle.box1,.box2{ /*并集选择器以逗号隔开*/width: 100px;height: 100px;background-color: red;}/style
/head
bodydiv classbox1/divdiv classbox2牛肉面/div
/body
/html后代选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titlePractise/titlestyle.msg p{ /*后代选择器选中div下的所有p标签*/color: blue;}/style
/head
bodydiv classmsgp方便面/pp牛肉面/pp香辣面/p/div
/body
/html子代选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titlePractise/titlestyle.msg p{ /*子代选择器选择类为msg的div下的所有p标签不选类名为box下的p标签*/color: blue;font-size: 20px;}/style
/head
bodydiv classmsgp方便面/pp牛肉面/pdiv classboxp蹭面/p/divp香辣面/p/div
/body
/html伪类选择器
相当于在特定情况下给标签触发样式
元素:hover{}-----当鼠标悬停时触发样式
元素:active{}-----当鼠标按下元素触发样式元素:visited{}-----当a标签被访问过时触发样式
元素:link{}-----当a标签未被访问过时触发样式爱恨准则先爱后恨
LOVE HATE
css有个规定四个伪类顺序必须是按照爱恨准则否则会有伪类不生效
link visited hover active元素:focus 获得焦点
元素:checked (单选/多选)表单被勾选状态!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}input,button{outline: none;/*清除默认焦点*/}.btn{border: 1px solid red;}.btn:focus{ /*点击input获取焦点*/border: 1px solid blue;}.text{display:none;/*在网页中不显示也不占地方*/background-color: red;}.btn:focus.text{ /*相邻选择器选中对应元素的下一个兄弟元素*/display: block;/*显示*/}.rad:checked{/*当表单被勾选时宽扩大到100px高扩大到100px*/width: 100px;height: 100px;}/style
/head
bodyinput typetext classbtnp classtext我是渣渣辉当你获取焦点时就可以看到我/plabel for男input classrad typeradio namety/labellabel for女input classrad typeradio namety/label
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titlePractise/titlestyle*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: blue;}.box:hover{ /*当鼠标悬停在box盒子上时变为红色盒子大小扩大1倍*/width: 200px;height: 200px;background-color: red;}/style
/head
bodydiv classbox/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titlePractise/titlestyle*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: blue;}.box:hover{ /*当鼠标悬停在box盒子上时变为红色盒子大小扩大1倍*/width: 200px;height: 200px;background-color: red;}.box:active{ /*当鼠标按下时盒子变为黄色*/background-color: yellow;}/style
/head
bodydiv classbox/div
/body
/html伪元素选择器
相当于创建一个虚拟元素
元素:before{content:内容}----在元素前面添加一个子元素
元素:after{content:内容}----在元素后面添加一个子元素
注必须拥有content属性样式上述两个伪元素才会被激活作用体现在如果你希望网页里的部分内容文字/图片不能被选中或下载就使用伪元素。1.性能更好伪元素并不是真实存在的只能看不能用不能被选中所以减少了交互需求性能更好2.安全性更好只能看不能用不能取用内容3.伪元素可以用css创建元素而不需要html标签简化了html结构!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.box::before{content: 我爱吃;}.box::after{content: 麦当;}/style
/head
bodyspan classboxQQ糖/span
/body
/html结构选择器
元素:nth-child(下标){}---根据下标指定元素数据从1开始计算
元素:nth-last-child(下标){}---根据下标指定元素数据从最后开始计算元素:first-child{}---选中第一个子元素
元素:last-child{}---选中最后一个子元素元素:nth-of-type(下标){}---根据下标指定元素(优先指定类型忽略其他的类型)
元素:nth-last-of-type(下标){}---根据下标指定元素(优先指定类型忽略其他的类型)!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.box:nth-last-child(1){color: red;}.box:nth-child(1){color: blue;}/style
/head
bodydivp classbox语文/pp classbox数学/pp classbox英语/pp classbox化学/p/div
/body
/html属性选择器
元素[属性名]{}---包含有指定属性名的元素
元素[属性名值]{}---属性名的值为指定值的元素
元素[属性名*值]{}---属性名的值包含指定值的元素
元素[属性名^值]{}---属性名的值以指定值开头的元素
元素[属性名$值]{}---属性名的值以指定值结尾的元素!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylediv p[classbox1]{color: red;}div p[class$4]{ /*以4结尾的属性值*/color: blue;}/style
/head
bodydivp classbox1语文/pp classbox2数学/pp classbox3英语/pp classbox4化学/p/div
/body
/html相邻选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}input,button{outline: none;/*清除默认焦点*/}.btn{border: 1px solid red;}.btn:focus{ /*点击input获取焦点*/border: 1px solid blue;}.text{display:none;/*在网页中不显示也不占地方*/background-color: red;}.btn:focus.text{ /*相邻选择器选中对应元素的下一个兄弟元素*/display: block;/*显示*/}/style
/head
bodyinput typetext classbtnp classtext我是渣渣辉当你获取焦点时就可以看到我/p
/body
/html表单form
提供一个让用户进行交互的窗口输入框选择框提交按钮
form属性action数据提交的位置要把数据提交到后台/数据库method数据提交方式https请求格式:(get/post)默认是getget只是拿数据只能看post拿数据的同时传一些数据
form功能控件标签form标签中的标签input---输入框行内元素标签textarea---多行输入框都可以设置输入提醒属性placeholder行内元素标签label---为表单中的各个控件定义标题通常使用在表单内 他通常关联一个控件行内元素标签select---下拉菜单行内元素标签option---下拉菜单里的选项button---按钮一般是结合js做操作行内元素标签
input属性type---输入类型placeholder---文本框提示语
input类型typetext---文本框password---密码框checkbox---多选框radio---单选框基于name判断submit---提交按钮file---文件上传url---输入网址reset---重置表达内容
value设置控件值
name设置控件名!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyform action!-- 当行文本框 --姓名input typetext placeholder请输入姓名!-- 多行文本框输入 --textarea name id cols30 rows10 placeholder请输入兴趣/textarea!-- 下拉菜单 --select name idoption value语文/optionoption value数学/optionoption value英语/option/select!-- 普通按钮 --button点我起飞/buttonlabel forusername性别/labelinput typetext idusernamelabel for姓名input typetext/labelhr!-- 密码框 --label for请输入密码input typepassword/label!-- 多选框 --label for肉类input typecheckbox/labellabel for蔬菜input typecheckbox/labelbr!-- 单选框 --label for男input typeradio nameky/labellabel for女input typeradio nameky/labelbr!-- 提交按钮 --input typesubmit value点我br!-- 单个文件上传 --input typefilebr!-- 多个文件上传 --input typefile multiplebr!-- 重置 --input typeresetbr!-- 网址输入框 --label for网址输入框input typeurl/labelinput typesubmitbr!-- 数字输入框 --label for输入数字input typenumber max100 min0 step5/label/form
/body
/htmllabel标签
通常使用在表单内他通常关联一个控件(form标签中的标签) 其中for属性功能表示这个label是为哪个控件服务的
第一种写法label 姓名input typetext/label第二种写法
label forusername姓名/label
input typetext idusername表格table标签
使用table标签来定义表格 注不支持排序求和等数学计算只是用来展示数据
表格table组成都是标签table表格标签caption表格标题tr表格的行内容都是在行里th表格的头字体会加粗代表一列的标题文本信息上下左右居中并且加粗td表格单元格代表每一项文本信息上下居中需要在table选择器里面加text-align: center;文本居中!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}table{width: 500px;border: 1px solid red;text-align: center;/*内容居中*/border-collapse: collapse;/*把表格变成单边边框线*/}td,th{border: 1px solid red;}.td1{height: 100px;}.td2{width: 400px;}/style
/head
bodytablecaption兴趣爱好表/captiontrth姓名/thth年龄/thth爱好/th/trtrtd classtd1小川/tdtd18/tdtd干饭/td/trtrtd classtd2小明/tdtd20/tdtd足球/td/tr/table!-- 一行中单元格的宽度/高度取决于一行里面最高的那个 --!-- 一行中单元格的宽度高度是按照内容来进行分配的其他都是等比例缩放 --
/body
/html合并单元格
将水平或者垂直多个单元格合并成一个单元格
给保留的单元格设置:跨行合并(rowspan)或者垮列合并(colspan)!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}table{width: 500px;border: 1px solid red;text-align: center;/*内容居中*/border-collapse: collapse;/*把表格变成单边边框线*/}td,th{border: 1px solid red;}/style
/head
bodytablecaption兴趣爱好表/captiontrth姓名/thth年龄/thth爱好/th/trtrtd小川/tdtd rowspan218/td !--合并两行--td干饭/td/trtrtd colspan3小明/td !--合并三列--td20/tdtd足球/td/tr/table!-- 如果合并前有内容那么在合并的时候就会把内容区挤到一边去 --
/body
/html
