CSS选择器详解及常用样式表标记标签属性

最新推荐文章于 2022-12-04 15:21:30 发布
最新推荐文章于 2022-12-04 15:21:30 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端开发学习 文章标签： CSS样式、CSS常用选择器、CSS常用属性、CSS的基本写
本文为博主-Rong姐姐好可爱原创文章，未经允许不得转载.
本文链接：https://blog.csdn.net/Mmdapl/article/details/79589156
版权

本学期开设有个ASP.NET课程，刚开始两周，一直处于复习 web技术阶段，刚好自己准备好好学一下CSS的相关内容，就顺路一起看看，了解CSS常用的选择器，这样在后续的个人网站开发上，可以更方便，进入正题：

CSS：Cascading Style Sheets(层叠样式表)

 常用的CSS选择器：

       1.通用选择器(Universal)

 *{ /** * font-family：字体 * margin：外间距 * padding:内间距 */ font-family: "arial black"; margin: 0px; padding: 0px; }

       2.类型选择器(Type)

h1,h2,h3{
				color: red;
				background-color: aquamarine;
	}
       3.类选择器(Class)：解决一类标签的问题
        格式：

        样式定义选择符号.类名{样式属性1：值1;样式属性2：值2;}

div.bg{
				background-color: green;
}
div.class1{
				font-family: "微软雅黑";
				margin: auto;
}
        4.ID选择器
         格式：

        #ID选择器{属性1：值1;属性2：值2;}

#id_name1, #id_name2{
				/**
				 * 多个id选择器，可用逗号隔开书写
				 */
				font-family: "微软雅黑";
			}
         5.伪类选择器

        CSS 中的伪类选择器在创建样式规则时提供了额外的选项，可以添加到其他选择器，创建更加负责的CSS规则；

#title.p:first-child{
				font-size: x-large;
}
#title.p:nth-child(2){
				font-size: large;
}


CSS样式：

        1.内联样式
        在HTML元素中使用style标记 ，建立一个或多个样式 。
        格式：
        style="属性1：值1；属性2：值2;属性3:值3"
        eg：
                <p style="font: '微软雅黑';font-size: 14px;">重新复习CSS样式</p>
         2.内部样式表
        在<head>标签中，使用<style></style>来使用样式
        eg:
        style>
h1{
font-size: 20px;
background: auto;
padding: 5px;
}
</style>
       
        3.外部样式表
        单独建一个.css文件夹，在<head></head>总用link来引入css；

        <link rel="stylesheet" type="text/css" href="css相对路径"/>

<a>标记的选择器，可以设置不同类型链接的显示方式

            a:link：未被访问过的超链接；
        a:visited:已被访问过的超链接；
        a:active:当前超链接处于选中状态；

        a:hover:当鼠标指针移动到超链接上显示；（hover：悬停，徘徊）

CSS常用属性：

(1) *block（区块）

行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;

/*表格宽度自适应*/
th {
white-space: nowrap;
}

显示 display:

none; /*不显示，使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/
(2) *box（盒子）

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
裁切 clip: rect(12px,auto,12px,auto)

(3) float（漂浮）

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法
<div style='background-color:red;float:left;width: 50%;' >div1</div>
<div style='background-color:green;float:right;width: 50%;' >div2</div>
一个问题

子标签使用了float时候，父标签的样式失效

<div style='background-color:red;'>
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
</div>

解决方案一：clear: both

<div style='background-color:red;'>
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
    <div style="clear: both;"></div> <!--加上clear：both之后就正常了-->
</div>

解决方案二：clearfix

<div style='background-color:red;' class="clearfix">
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
</div>
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
(4) position（定位）
fixed

一般用来写网页顶端的固定导航条，或者两侧的菜单。

<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%-->
 
<div style="position:fixed;height:10%;background-color:lightskyblue;color:white;width:100%;top:0px;">我是导航</div>
<div style="">
    <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;background-color:indianred">我是菜单</div>
    <div style="float: right;width:80%;"><p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>
absolute与relative

这两者一般配合使用，用于调整div之间的相对位置

<div style="position:relative;width: 300px;height: 150px;">
    <div style="position:absolute;float: left;width: 20%;background-color:indianred;bottom: 0px;right: 0px;">我是菜单</div>
</div>
(5) 透明度
.image{
    opacity: 0.5
}
<img src="http://www.jotlab.com/wp-content/uploads/2008/08/python.jpg" style="opacity: 0.5; width:50%; height:50%; ">
(6) font（字体）

颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)

(4) background（背景）

背景 background: transparent; /透视背景*/
颜色 background-color: 数值;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/

滚动 background-attachment: fixed | scroll;
位置 background-position:数值 | top | bottom | left | right | center;

background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

(7) text（文本）

大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;

(8) border（边框）

边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;
简写 border: width style color;

边　　框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
(9) list-style（列表样式）

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/

位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;

(10) margin（边界）

margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;

(11) padding（填充）
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
(12) vertical（垂直）
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
(13) a（链接）
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
(14) cursor（光标）

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;

/*也可以自定义*/
cursor: hand; /*链接手指*/
cursor: crosshair /*十字体 */
cursor: s-resize /*箭头朝下 */
cursor: move /*十字箭头, 朝右*/
cursor: help /*加一问号 */
cursor: w-resize /*箭头朝左 */
cursor: n-resize /*箭头朝上 */
cursor: ne-resize /*箭头朝右上 */
cursor: nw-resize /*箭头朝左上 */
cursor: text /*文字型*/
cursor: se-resize /*箭头斜右下 */
cursor: sw-resize /*箭头斜左下*/
cursor: wait /*漏斗*/

储凡443
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html与css机制的详解
08-30
CSS可以通过内联样式（直接写在HTML元素的`style`属性中）、内部样式表（写在`<style>`标签内，位于`<head>`中）或外部样式表（写在单独的.css文件中并链接到HTML文件）三种方式引入。 了解HTML和CSS是创建响应式、...
DIV＋CSS快速入门
05-10
7. **CSS选择器和属性**：在CSS代码中，`#`表示ID选择器，如`#Header`选择ID为"Header"的元素。`width`, `margin`, `height`, `background`等是CSS属性，用于设定元素的宽度、外边距、高度和背景颜色。 8. **XHTML*...
选择器
weixin_51654260的博客
12-07 492
1、标签选择器 1、选择器的功能是选中要添加样式的标签元素。 2、标签选择器：通过标签名直接选择相应的标签 格式：标签名{ 声明； } 例如： div{ color:red; } p{ color:black; } 2、ID选择器 1、ID选择器是选中页面中唯一的一个标签。 格式：#ID值{ 声明； } 【注】： 1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。 2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能
CSS中的样式列表标记
CSS 初学者指南
07-09 794
想要为列表项的标记设置样式是完全合理的。 您知道：无序列表中带有黑色文本的蓝色项目符号。 或在有序列表中带有剔除白色数字的红色计数器。 有一个有效的规范草案 ，它定义了::marker伪元素，它将为我们提供这种控制。 /* Not supported anywhere; subject to change */ li::marker { color: blue; } 不过，由于CS...
常用选择器
ji_ni_tai_mei17的博客
10-11 282
常用选择器用法
常用CSS样式标记
txz_gray的博客
10-21 783
//不换行，超出用省略号 .nowrap-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } //限制行数，超出用省略号 .manyline-ellipsis { overflow: hidden; text-overflow: ellipsis; ...
标记样式HTML怎么写,写css样式表的标签是什么
weixin_39718286的博客
06-10 431
写css样式表的标签是什么写css样式表的标签是标签，style标签放在head标签中。示例：h1 {color:red}p {color:blue}Header 1A paragraph.定义和用法 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。(相关课程推荐：css视频教程)type 属性是必需的，定义 style 元素的内容。唯一可...
第四章 CSS选择器.docx
11-12
【CSS选择器详解】 CSS（Cascading Style Sheets）层叠样式表是用于定义文档样式的语言，主要用于控制网页的布局、颜色、字体等视觉效果。CSS的优势在于它弥补了HTML标记属性在样式定义上的局限性，使得网页设计...
《CSS样式》习题.pdf
10-04
【CSS样式】详解 ...以上是对CSS样式相关习题的详细解析，涵盖了CSS的基本概念、选择器、属性和值的使用，以及布局和定位等方面的知识。掌握这些内容，有助于理解和应用CSS来美化和控制网页的显示效果。
(完整word版)《CSS样式》习题答案.pdf
11-26
1. 标记选择器如`h1{color:red;font-size:25px;}`，用于设置所有`<h1>`标题的样式。 2. 类别选择器如`.red{color:red;font-size:18px}`，可以应用于任何有`class="red"`属性的HTML元素。 3. ID选择器如`#bold{font...
CSS-常用的选择器
paku-san的博客
05-19 1328
六种常用的选择器准备工作1、id选择器2、class选择器(类选择器)3、标签选择器4、通配符5、分组选择器6、后代选择器7、伪类选择器 准备工作 使用div标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> &l...
常见的选择器
weixin_44549330的博客
03-31 146
撰写时间：2019年02月21日 我们在编写网页时，我们会用到各种各样的选择器。对与刚刚入门的来说可以说是一头雾水,下面我来给你们总结一些一些常用的选择器和一些需要注意的方法。 选择器有很多种例如： 1.类选择器 语法： .类名{ } 选择带有这个类名的元素 上图中是选中 带有one这个类的元素 2.id选择器 语法： #加id名称{ } 选择带有这个id的元素 3.标签...
CSS常见选择器
最新发布
qq_63218110的博客
12-04 2158
本篇博客主要介绍CSS的引入方式，选择器，常见的元素属性，以及弹性布局
CSS常见的选择器
dxm809的博客
03-14 1053
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;    &lt;ti
CSS 常用的选择器
qq_56444564的博客
10-19 375
实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。优点：可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。注意：大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开。//使用该选择器定义样式，清除所有HTML标记的默认边距。
常见选择器24
chen_zan_yu_的博客
03-21 225
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的选择器</title> <style type="text/css"> /* * 元素选择器 * * 作用:通过元素可以选择页面中的所有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值