CSS标签选择器→教你如何使用

2023-12-13 05:46| 来源: 网络整理| 查看: 265

一、css的选择器学习： 1、标签选择器：标签名{样式1；样式2；........} 作用：会将当前网页内的所有该标签增加相同的样式 2、id选择器： #标签的id属性值{样式值1；.......} 作用：给某个指定的标签添加指定的样式 3、类选择器： .类选择器名{样式1........} 作用；给不同的标签添加相同的样式 4、全部选择器： *{样式1....} 作用：选择所有的html标签。并添加相同的样式

以上的4个标签选择器师最常用的，应重点掌握 ------------------------------------------------------------- 5、组合选择器：选择器1，选择器2，....{样式1.。。。 } 作用：解决不同的选择器之间重复的问题 6、子标签选择器：二、css的使用过程： 1、声明css代码域 2、使用选择器选择要添加的样式的标签根据需求来选择: 使用*选择器给整个页面添加基础样式使用类选择器给不同的标签添加基础样式使用标签选择器给某类标签添加基础样式使用id、属性选择器、style属性声明方式给个标签添加个性化样式三、书写样式单边框设置>border:solid 1px; 字体设置>font-size:10px;设置字体大小 >font-family:"黑体"；设置字体的格式 >font-weigt：bold；设置字体加粗字体颜色设置>background-color；颜色背景颜色设置>backround-img:url;图片的相对路径 >bacground-repeate:no-repeate;设置图片不重复 >bacground-size；cover;图片平铺整个页面高宽设置浮动设置>float:left|right 行高设置>line-heft:10;

四、一些CSS选择器的格式如下：

css的选择器学习 /*标签选择器*/ table{ width: 300px; height: 200px; border: solid 1px; background-color: red; } /*id选择器*/ #t1{ background-color: gray; } /*类选择器*/ #t1{ color: rgd; } /*组合选择器*/ .commom,table{ background-color: blue; } /*子标签选择器*/ ul li a{color: black;} css的选择器学习 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 css学习 安徽浙江上海哈哈

五、一些css样式的使用，直接用代码的形式展现给大家：

css的样式使用 /*添加网页背景图*/ body{ background-image: url(img/03.jpg);/*添加背景图片*/ background-repeat: no-repeat;/*设置图片不重复*/ background-size: cover;/*设置图片平铺*/ } /*标签选择器*/ table{ } /*设置toble的行高*/ tr{ height: 40px; } /*设置宽度*/ td{ width: 100px;/*设置宽*/ border: solid 1px red;/*添加边款及其颜色和大小*/ border-radius: 10px;/*设置表格的角度*/ background-color: orange;/*设置背景颜色*/ text-align: center;/*设置文本位置*/ color: darkblue;/*设置文本颜色*/ font-weight: bold;/*设置文本加粗*/ letter-spacing: 10px;/*设置文本间距*/ } /*-------------------------------------------------------------*/ ul{ } li{ list-style: none;/*去除li的标签识符*/ /*display: inline;*/ float: left;/*设置菜单左悬浮*/ } li a{ color: black; text-decoration: none;/*设置下划线*/ font-weight: bold; font-size: 20px; margin-left: 20px; } css的样式使用姓名性别爱好张三男跳舞李四男打球图片视频学术词典地图

【本文地址】

CSS标签选择器→教你如何使用

CSS标签选择器→教你如何使用

今日新闻

推荐新闻