CSS基础、盒子、选择器

最新推荐文章于 2022-04-14 22:56:09 发布

沈深

最新推荐文章于 2022-04-14 22:56:09 发布

阅读量396

点赞数

分类专栏：前端学习文章标签： css css3 html5

本文链接：https://blog.csdn.net/gwhfamily/article/details/116136526

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS简介

css，即Cascading Style Sheet（层叠样式表）。HTML，CSS，JavaScript是前端技术中最核心的三个元素，HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。

1995年W3C组织成立，CSS的创作成员成为了W3C的工作小组成员，1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准完成，成为w3c的推荐标准。

CSS的三种引用方式

优先级为内联式 > 嵌入式 > 外部式

外部样式表

外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是用外部样式表。

<head>
	<title>外部样式表<title>
	<link href="style.css" rel="stylesheet" style="text/css"/>
</head>

内部样式表（嵌入式）

内部样式表即，将CSS内容放在<style>中。

<head>
	<title>内部样式表</title>
	<style type="text/css">
	p{
	color:red;}
	</style>
</head>

内联样式表

内联样式表与内部样式表不同的是，不在<style>中定义，而是用style属性定义。

<body>
	<p style="color=red;">内联样式表</p>
</body>

CSS三大特性

层叠性

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中，同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

div{
    background-color:red;
}
div{
    background-color:blue;
}

如上例，两个样式冲突，最后显示的背景颜色为蓝色。

继承性

子标签会继承父标签的一部分样式，如字体、字号、颜色、行距等文本类属性。
并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性。
a标签的文字颜色和下划线是不能继承的。
h标签的文字大小是不能继承的。

<style>
	div{
	color: red;
	font-size:15px;}
</style>
<div>
	<p>这里会显示红色的字体。</p>
	<a href="#">超链接的颜色不会改变。</a>
	<h1>h1的大小也不会改变。</h1>
</div>

在这里插入图片描述

优先级

继承样式的权重为0。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

css特殊性有四个数字组成，从左到右，左边最大，数位没有进制（0,0,0,5+0,0,0,5=0,0,0,1,0），级别之间不可超越

继承的贡献值	0，0，0，0
继承或者 *	0,0,0,0
元素（标签选择器）	0,0,0,1
类，伪类	0,0,1,0
ID	0,1,0,0
行内样式 style=""	1,0,0,0

div,ul,li   0,0,0,3

.nav,ul,li   0,0,1,2

a:hover   0,0,1,1

.nav a   0,0,1,1   

#nav p     0,1,0,1

基础

字体样式

以段落为例

<p id="p1">题都城南庄
  <br />唐代崔护
  <br />去年今日此门中，人面桃花相映红。
  <br />人面不知何处去，桃花依旧笑春风。
  <br /></p>
 <p id="p2">寒菊/画菊
  <br />宋代郑思肖
  <br />去年今日此门中，人面桃花相映红。
  <br />人面不知何处去，桃花依旧笑春风。
  <br /></p>

#p1{
    font-family:微软雅黑;
    font-size:medium;
    font-weight:lighter;
    font-style:normal;
    color:blueviolet;
}
#p2{
    font-family:楷体;
    font-size:30px;
    font-weight:bold;
    font-style:italic;
    color:cadetblue;
}

两个文本样式不同。
在这里插入图片描述

font-size

有很多写法，可以写成xxpx格式，也可以写成：

font-size取值	说明
xx-small	最小
x-small	较小
small	小
medium	默认值，正常
large	大
x-large	较大
xx-large	最大

在这里插入图片描述

font-weight

为字体的粗细，也可以写成xxpx的格式，或者

font-weight取值	说明
normal	正常
lighter	较细
bold	较粗
bolder	很粗

在这里插入图片描述

font-style

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

在这里插入图片描述
bold和bolder的区别很小，italic和oblique的区别也很小。

注释

与C语言类似，CSS中的注释为

/*这是注释，和c语言类似*/

//但是CSS不支持c语言中的单行注释（这是c语言）

<!--这是html的注释方法-->

文本样式

这个实在太多了，就不一一解释、不附上html代码了。

text-decoration

#p1{
	text-decoration:underline;}
#p2{
	text-decoration:line-through;}
#p3{
	text-decoration:overline;}

在这里插入图片描述

text-transform

当内容为Visual Studio code（注意code都是小写）

#p1{
    text-transform:none;
}
#p2{
    text-transform:lowercase;
}
#p3{
    text-transform:uppercase;
}
#p4{
    text-transform:capitalize;
}

在这里插入图片描述
lowercase：转换成小写
uppercase：转换成大写
capitalize：将每个单词的首字母大写

font-variant

#p1{
    font-variant:normal;
}
#p2{
    font-variant:small-caps;
}

在这里插入图片描述可以看出，用了samll-caps属性后，小写字母变成了小几号的大写字母，而大写字母则没有这个效果。

缩进及对齐

text-indent后加像素为缩进的距离text-align为文本的对齐方式。

#p1{
    text-indent:50px;
}
#p2{
    text-align:left;
}
#p3{
    text-align: center;
}
#p4{
    text-align: right;
}

在这里插入图片描述

间距

line-height为行间距，letter-spacing为字母间距，word-spacing为单词间距。

#p1{
    line-height: 13px;
}
#p2{
    letter-spacing: 10px;
}
#p3{
    word-spacing: 20px;
}

在这里插入图片描述
因为line-height：设置的行间距很小，所以第一个段落的行重叠在了一起。

边框样式

border的三种属性：width、style、color可以合并成一种写法：

p{
border:1px solid navy;}

border-style属性值	说明
none	无样式
hidden	与none大致相同，用于表时，hidden用来解决边框冲突
solid	实线
dotted	点线
dashed	虚线
double	双线

局部边框格式为：
border-+top/bottom/left/right+width/style/color:样式；
边框圆角：

border-radius:10px;

像素值越大，圆角越大。
在这里插入图片描述

背景样式

背景图像

body{
background-image:url("4.jpg");}

通常情况下，缩小窗口以后背景显示就不那么完全了，因此需要额外地设置：

    background-size:100%;
    background-repeat:no-repeat;

设置background-size为100%后，不管浏览器窗口多大，都会按照100%的比例显示完整图片，有时因为比例问题，浏览器会自动重复铺满，此时可以通过设置background-repeat。有三种：no-repeat，repeat-x，repeat-y。

background-attachment: fixed;

可以设置背景图固定，不随滚轮滚动。
background-position可以设置背景图片显示在center、left、right。也可以通过设置百分比、像素值决定背景图片的位置。

背景颜色

只需要一行简单的

    background-color:aliceblue;

值得说明的是，color为文本颜色，background-color为背景颜色。

超链接样式（部分）

超链接大部分内容都涉及到了伪类，跳过伪类的部分，还剩下自定义鼠标样式。
在这里插入图片描述

比如当我设置超链接的鼠标样式为wait。

a
{
    cursor:wait;}

鼠标悬停在超链接上时，如图所示在这里插入图片描述

图片样式

想要定义图片的水平对齐、垂直对齐，需要在img的父元素中定义。

<div id="img1">
  <img src="4.jpg"/>
  </div>
<div id="img2">
  <img src="4.jpg"/>
</div>
<div id="img3">
  <img src="4.jpg"/>
</div>

img{
    width:96px;
    height:54px;
}
#img1{
    text-align: left;
}
#img2{
    text-align: center;
}
#img3{
    text-align: right;
}

最终显示结果如下：在这里插入图片描述
垂直对齐为vertical-align，有top、middle、baseline、bottom几种，就不再演示了。

列表样式

list-style-type有几种取值，只列举比较常用的：
在这里插入图片描述
也可以用用自己的图片：

list-style-image:url("1.png");

表格样式

表格边框合并：

border-collapse: collapse;

合并前：
在这里插入图片描述
合并后：

如果不合并边框，也可以自定义边框间距

table{
    border-spacing: 10px;
}

在这里插入图片描述
caption-side可以定义标题的位置，如果设置为bottom，标题就会出现在表格下方

盒子

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
CSS盒模型和IE盒模型的区别：

在标准盒子模型中，width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

注：Android中也有margin和padding的概念，区别在于，Android中没有border这个东西，margin并不是控件的一部分

只有块元素能设置宽度width和高度height，行内元素无法设置。

简洁写法

padding:20px;
padding:20px 40px;
padding:10px 20px 40px;
padding:20px 40px 20px 40px;

第一种写法表示，四个方向的内边距都是20px。
第二种写法表示，padding-top和padding-bottom为20px，padding-left和padding-right为40px。
第三种写法表示，padding-top为10px，padding-left和padding-right为20px，padding-bottom为40px。
第三种写法的顺序为：top、right、bottom、left的顺时针方向。
margin同理。
定义盒子的属性时写法是
border/margin/padding + -top/bottom/left/right:
或border/margin/padding：

选择器

元素选择器

html {color:black;}

id选择器

当在html中写了多个标签时，为了区分开各个标签的内容，可以为它设定id。

  <div id="div1">&nbsp</div>
  <div id="div2">&nbsp</div>
  <div id="div3">&nbsp</div>

#div1{
    background-color:aqua;}
#div2{
    background-color:darkcyan;}
#div3{
    background-color:violet;}

效果如下：
在这里插入图片描述

class选择器

与id选择器不同，id选择器只能被一个元素调用，class可以被不同的元素调用。

  <p class="class1">内容</p>
  <span class="class1">这是span</span>

.class1{
    background-color:coral;}

在这里插入图片描述

多类选择器

class内可以不止有一个单词，可以是多个单词：

  <div class="class1 class2">这是class1和class2</div>
  <div class="class1">class1</div>
  <div class="class2">class2</div>

.class1{
    color:blue;
}

结果是第一个div和第二个div都有class1的属性值，于是效果如下：
在这里插入图片描述

派生选择器

后代选择器

如果想选中div标签下的全部p标签，只需要：

div p{color:red;}

子元素选择器

子元素选择器，即选中某个或某类元素下的子元素，对子元素进行设置样式。
似乎有两种不同的写法，这是《HTML与CSS基础教程》的写法

<div id="id1">
  <p id="p1">这是p1</p>
  <p id="p2">这是p2</p>
</div>

#id1 #p1{
    color: blue;}

而网上大部分的写法都是用>：

#id1>#p1{color:blue;}

div>#p1{color:blue;}

试了一下，效果一样
在这里插入图片描述
只有id为p1的变了色。

相邻选择器

同样是上面的代码，对CSS稍加改动。

#p1+p{
    color: blue;
}

在这里插入图片描述
这次变色的是p2，因为#p1+p的意思是，选择id为“p1”的元素的相邻的下一个p元素。

群组选择器

元素之间必须用逗号隔开

p,h1{
	color:red;}

相当于

p{color:red;}
hq{color:red;}

属性选择器

举个例子，比如想选择img标签的title属性，则需要：

img[title]{color:red;}

如果想选择全部的title属性，则需要：

*[title]{color:red;}

如果想选择更具体的，比如img标签title为233的属性：

img[title="233"]{color:red;}

或者选择p标签中class为p1的：

p[class~="p1"]{color:red;}

伪类选择器

a:link{
    color:black;}
a:hover{
    color:red;}
a:visted{
    color:purple;}
a:active{
    color:green;}

link为未点击时的样式，hover为鼠标悬停时的样式，visted为点击过的样式，active为点击的一瞬间的样式。
点击前在这里插入图片描述鼠标悬停点击的一瞬间点击以后
结构伪类选择器：

table tr:nth-child(odd){
    color:red;
}

可以对table的odd奇数或者even偶数行进行设定。
在这里插入图片描述
还有一些其他的：

after选择器

after选择器即，在某元素的后面加上after的样式。

<p>这是一个p</p>
<p>这是零一个p</p>

p:after
{
content:"after";}

在这里插入图片描述

引用：
CSS三大特性
 CSS盒模型

沈深

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础、盒子、选择器

CSS简介css，即Cascading Style Sheet（层叠样式表）。HTML，CSS，JavaScript是前端技术中最核心的三个元素，HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。1995年W3C组织成立，CSS的创作成员成为了W3C的工作小组成员，1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准完成，成为w3c的推荐标准。CSS的三种引用方式优先级为内联式 > 嵌入式 > 外部式外部样式表外部样式表是最理
复制链接

扫一扫