css的基础认识-Toy模板网

这篇具有很好参考价值的文章主要介绍了css的基础认识。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css的引入方式

内嵌式：将css的内容写在style标签中

style标签虽然可以写在页面中，但是通常约定写在head标签中

关系：样式表

<link rel="****"href=" ../css位置">

b.外联式 css写在单独的css的文件中

需要通过link标签在网页中引入

c.行内式：css写在style属性中

正常不使用，配合js使用

引入方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	单前页面	小案例
外联式	css写在单独的文件中，通过link标签引入	多个页面	项目中
行内式	css写在标签style属性中	当前标签	配合js使用

2.基础选择器

标签选择器

通过标签名，找到页面中所有这类标签，设置样式

结构：标签名{css属性名：属性值；}

注意：

标签选择器选择的是一类标签，而不是单独的某一个标签

标签选择器无论嵌套关系有多深，都能找到对应的标签

类选择器

结构：.类名{css属性名：属性值；}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

类名可以由数字，字母，下划线，中划线组成，但是不能以数字或者中划线开头

应该标签可以同时有多个类名，类名之间以空格隔开

类名可以重复，一个类选择器可以同时有多个标签

id选择器

结构：#id属性值{css属性名：属性值；}

作用：通过id属性值，找到页面中带有id属性值的标签，设置样式

注意：

id选择器所有标签都有id属性

id属性值类似于身份证号码，在页面中是唯一的，不可重复的！

一个标签只能有一个id属性值

一个id选择器只能选择一个标签

通配符选择器

结构：*{css属性名：属性值；}

作用：在页面中找到所有标签，设置样式

注意：

开发中使用极少，只有在特殊情况下才能使用到

在基础的小页面中可能使用到去除默认样式的标签margin和padding

字体和文本样式

字体样式：

取值：数字+px

注意点：谷歌浏览器默认的字体大小时16px

单位需要自己设置，否则无效

字体粗细：font-weight

属性名：font-weight

取值

关键字正常：normal 加粗 bold

纯数字 100-900 （浏览器中）正常400 加粗700

注意点：不是所有文字都提供九钟粗细，因此部分取值页面无法显示

实际开发中，正常，加粗两种使用最多

字体样式：font-stly

属性名：font-style

取值：正常（默认值）normal，倾斜 italic

字体类型：font属性值连写

属性名：font-family

常见取值：具体字体

具体字体，具体系列

注意点：如果字体名称中存在多个单词，推荐使用引号包裹

最后一项字体系列，不需要引号包裹

网页开发时，尽量使用系统常见的自带字体，保证不同用户浏览网页时正确显示

font（复合属性）：

注意点：当我们要使用多个字体样式，可以连写（属性名：属性值属性值属性值）

可以单独写；属性名：属性值；属性名：属性值；

样式默认会显示下面的（两个样式同时设置，会默认显示下方的样式）

文本样式：

1.文本缩进：text-indent

属性名：tetx-inden

取值：数字px 数字：em（推荐1em=当前标签font-size的大小）

（浏览器中，使用px 需要为1：2；推荐使用em，一个缩进为1em）

2.文本水平对齐：text-aligh

属性名：text-align（可以使文本，span标签，a标签，input标签，img标签居中）

取值：


属性值：left   左对齐
        right  右对齐
        center 居中属性
如果需要文本居中，text-align属性给文本所在标签的父元素中使用

3.文本修饰：text-decoration

取值方式：

underline：下划线，line-through：删除线，

overline：上划线，none：无装饰性（超链接使用的较多）

开发中会使用超链接text-decoration：none；清楚a标签默认的下划线

4.line-height行高

控制一行的上下行间距，属性名：line-height

取值：

数字+px；倍数（当前标签font-size的倍数）

应用：

让单行文字垂直居中可以设置line-height：文字父元素高度

网页精准布局时会设置,line-height:1,取消上下间距

行高与font连写的注意点：如果同时设置行高和font，注意覆盖问题

样式的层叠性：

颜色常见取值样式：

文字颜色：color ；背景颜色：background-color

属性值：

Rgb表示法：agb（0，0，0）

Raga表示法：rgba（0，0,0）

十六进制表示（常用）：#00000

标签水平居中的方法：margin：0 auto

注意：

如果让div，p，h（大盒子）水平居中，直接给当前亿速本身设置即可

Margin：0 auto，一般针对固定宽度的盒子，如果让大盒子没有设置宽度，此时会默认占满父元素的宽度

3.选择器进阶

目标：能够理解复合选择器的规则，并使用符合选择器在htm中选择元素

复合选择器

并集选择器

交集选择器

hover伪类选择器

Emment语法

后代选择器

作用：根据html标签的嵌套关系，选择父元素后代中满足的条件

语法：选择器1 选择器2{css}

在选择器1所找到后代（儿子，孙子，，，），找到满足选择器2的标签，设置样式

注意点：

后代包括：儿子，孙子等

后代选择器中，选择器与选择器之间通过空格隔开


<style>
    /* 后代选择器 div父元素 p子元素 */
    div p{
        color: aqua;
    }
</style>


<body>
    <div>
        <p>你好</p>
    </div>
</body>

2.子代选择器

作用：根据htm标签的嵌套关系，选择父元素子代中满足的条件

语法：选择器1>选择器2{css}

在选择器1所在的标签中找到子代，满足选择器2的标签。设置样式

注意：

子代只包括;儿子

子代选择器中，选择器与选择器之间通过>隔开

并集选择器

作用：同时选择多组选择器，设置相同的样式

语法：选择器1，选择器2{ css}

找到选择器1和选择器2选中的标签，设置样式

注意：

并集选择器中没组选择器之间通过“，”逗号分隔

并集选择器的没组选择器可以是基础选择器或者复合选择器

并集选择器的没组选择器通常一行写一行，提高代码的可读性

交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签

选择器语法:选择器1 选择器2{css}

结果

找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

交集选择器中的选择器之间是紧挨着的，没有当下分割开

交集选择器中如果没有标签选择器，标签选择器必须写在最前面


style{
p.box{
    color:red;}
}
<body>
<p class="box"> 这是p标签</p>
</body>

hover伪类选择器

作用：选中鼠标悬停在元素上的转态，设置样式

语法：选择器hover{css}

注意点：

伪类选择器的元素的某种转态

hover是用来实现划过效果的，非常常用。伪类 :主要是为了元素添加一些效果;这些必须通过鼠标的事件行为才能触发伪类:四个===经常应用超链接a标签上面,其中第124只能用在超链接a上，3没有限制 :link======鼠标访问前的样式 :visited===鼠标访问后的样式 :hover=====鼠标悬停时的样式 :active====鼠标激活瞬间样式,鼠标点击时冒号前后没有任何的空格符号注意事项:应用在超链接上面的时候:四个必须遵循以上顺序,不能更改,更改之后实现不了效果注意实现:开发的时候使用频率最高的就是:hover，实现鼠标悬停的效果;背景颜色改变,文本颜色改变。二，扩展 1.伪类选择器:link、hover、active、visited 2.伪对象选择器:after、before、fist-letter/line 3.关于之间的区别 - 写法上的区别:在css2中伪类和伪对象都是一个冒号,在css3中规定伪对象需要使用两个冒号 - 作用上的区别:伪类可以改变元素的状态,伪对象可以添加结构(虚拟的)

emmet语法：

作用：通过语法快速生成代码，简写

记忆	示列	效果
标签名	div	<div></div>
类选择器	.red	<div class="red">
id选择器	#one	<div id="one">
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li
内部文件	ul>li 我是内容	<ul><li>我是内容</li></ul>
创建多个	ul>li*3

4.背景相关属性

背景颜色

属性名：background-color（bgc）

属性值：

颜色取值：关键字，rgb元素表示法，rgba表示法，十六进制

注意点

背景颜色默认是透明：rgba（0,0,0,0）transparent

背景颜色不会影响大小，并且还能看清楚盒子大小位置，一般会在布局习惯先给盒子设置背景颜色

背景图片

属性名：background-image（bgi）

属性值：background-image：url（“图片的位置”）

注意点：

背景图片中url可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是在指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

背景平铺

属性名：background-repeat（bgr）

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都有平铺
no-repeat	不平铺
repeat-x	沿着水平方向x轴平铺
repeat-y	沿着垂直方向y轴平铺

背景位置

属性名：background-position（bgp）

属性值：background-position：水平方向位置垂直方向位置

方位名词（最多只能表示9个位置）

水平方向：left center right

垂直方向：top，center，botton

数字+px（坐标）：

原点（0,0）盒子的左上角

x轴：水平向右，y轴，垂直向下

操作，将图片左上角与坐标点重合即可

注意点：

方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

背景相关连写属性

属性名:background(bg

属性值:单个属性值的合写，取值之间以空格隔开

书写顺序:

推荐:background:color imagerepeat position

不分先后顺序背景色，背景图，背景平铺，背景位置（）

省略问题:

可以按照需求省略

特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()

注意点

如果需要设置单独的样式和连写

①要么把单独的样式写在连写的下面

②要么把单独的样式写在连写的里面


<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0”<title>Document</title><style>
div [
width:400px; height:400px;
/*不分先后顺序背景色背景图背景图平铺 背景图位置*/
/* background: pink url(./images/1.jpg) no-repeat center bottom; *//*背景图位置如果是英文单词可以颠倒顺序 */
background:    pink url(./images/1.jpg)no-repeat bottom center ;    
/* 测试背景图位置如果是数值不要颠倒顺序 */* 水平50px，垂直100px*/
/* background: pink url(./images/1.jpg)no-repeat 50px 100px; */
background:    pink url(./images/1.jpg)no-repeat 100px 50px;    

</style></head><body>
<div></div></body></html>

（拓展）img标签和背景图片的区别

需求：需要在页面中展示一张图片效果？

方法一：直接写上img标签设置即可

img标签是一个标签，不设置宽高默认会以原来的尺寸显示

方法二：div标签+背景图片

需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签

5.元素显示模式

块级元素（block）

定义：默认情况下，独占一行的元素就是块级元素。

显示特点：

独占一行（一行只能显示一个）

宽度默认是父元素的宽度，高度默认是由内容撑开的

可以设置宽高

代表标签：

div，p，h系列，ul,li,dl,dt,dd,from,header,nav,footer

行内元素

定义：默认情况下，一行能显示多个，并且元素的高度、宽度、行高等不能直接设置

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

链接里面不能再放链接。

特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

举例子：

<a>、、、、、<del>、<s>、<ins>、、等，其中标签最典型的行内元素。有的地方也成内联元素

行内块元素（内嵌块元素）

元素的高度、宽度、行高、以及顶部底部的内外边距都可以设置

常见的行内块元素：<img>,<input>

显示特点：

一行可以显示多个

可以设置宽高

代表标签：

input，textarea,button,select

特殊情况：img标签由行内块元素的特点，但是谷歌调试器中显示的结果是inline

元素显示模式转换

这三种元素之间可以通过display属性相互转换，并且也可以通过浮动、定位等进行转换

元素显示模式转换display

块转行内：display:inline;

行内转块：display:block;

块、行内转换为行内块：display:inline-block

html嵌套规范

块级元素一般作为大容器，可以嵌套文本，块级元素，行内块元素等

但是p标签中不要嵌套div p h等块级元素

a标签内可以嵌套任何元素

但是：a标签不能嵌套a标签

6.css的特征

1.1继承性的介绍

特性:子元素有默认继承父元素样式的特点(子承父业)

可以继承的常见属性(文字控制属性都可以继承)

1. color

2. font-stylefont-weightfont-sizefont-family

3. text-indenttext-align

4. line-height

注意点: 可以通过调试工具判断样式是否可以继承

继承性失效的情况

如果有元素有浏览器默认的样式，此时继承性依然存在

a标签的color继承失效

h系列的font-size继承会失效

2.1层叠性的介绍

特性:

1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上

2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效注意点:

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3.1优先级的介绍

>特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式:

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意点:

1.!important写在属性值的后面，分号的前面!

2.!important不能提升继承的优先级，只要是继承优先级最低!

3.实际开发中不建议使用!important。

3.2权重叠加计算

场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式:(每一级之间不存在进位)

范围越来越广优先级越低，按级别个数不能进位自己是多少就是多少个

复合选择器中:行内样式的个数id选择器的个数类选择器的个数标签选择器的个数

比较规则:

1.先比较第一级数字，如果比较出来了，之后的统统不看

2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

3. .....

4.如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算!)

注意点:!important如果不是继承，则权重最高，天下第一!

7.谷歌调试器测试工具

8、盒子模型

1盒子模型的介绍

1.盒子的概念

1.页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局

2.浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

2.盒子模型

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型

记忆:可以联想现实中的包装盒


<style>    
    /* 纸箱了，填充泡沫 */    
    div{    
    width:300px;    
    height: 300px;    
   background-color:    pink;    
    /* 边框线 ==纸箱子    
    border: 1px solid □#000;    
    /* 内边距 == 填充泡沫 :出现在内容和盒子边缘之间*1    
    padding:20px;    

    /*外边距:出现在两个盒子之间，出现在盒子的外面*/    
   margin: 50px;    

   </style>    
    </head>    
   <body>    
   <div>内容电脑</div>    
  <div>内容电脑</div>     
   </body>

2.内容的宽度和高度

作用:利用width和height属性默认设置是盒子内容区域的大小属性:width/height

常见取值:数字+px 盒子内容区域heigt width

3.边框（border）

属性名：border

属性值：单个取值的连写，取值之间以空格隔开{ 如：border：10px solid red；}

快捷键：bd+tab

{ 如：border：10px solid red；}实线

{ 如：border：10px dashed red；} 虚线

{ 如：border：10px dotted red；} 点线

边框（border） -单个属性

边框粗细	border -width 数字+px
边框样式	border-style 实线solid，虚线：dashed，点线：dotted
边框颜色	border-color 颜色取值

盒子尺寸= width/height +边框线

11-盒子模型-内边距

多值写法：上右下左，顺时针顺序，如果数值不够，看对面数值

div{
width: 300px;
height: 300px;	
background-color: pink;
	/*添加了4个方向的内边距*/	
padding:50px;	

/* padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距*/	
/* padding 最多取4个值 */	

/*四值:上右下左*/
/* padding: 10px 2epx 40px 80px; */
	/*三值:上左右 下*/	
/* padding: 10px 40px 80px;*/
	/* 两值 */	

padding: 10px 80px;
	}

4.5CSS3盒模型(自动内减)

给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?
        解决方法 ①:手动内减
        ·操作:自己计算多余大小，手动在内容中减去
        缺点:项目中计算量太大，很麻烦解决方法 ②:自动内减
        操作:给盒子设置属性box-sizing:border-box;即可·优点:浏览器会自动计算多余大小，自动在内容中减去

5.4清除默认内外边距

场景:浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置·比如:body标签默认有margin:8px
比如:p标签默认有上下的margin
比如:ul标签默认由上下的margin和padding-left
解决方法：

*{
margin：0；
padding：0
}

版心居中：

<style>
	div【	
	width: 1000px;	
    height: 300px;
    background-color: pink;
	margin: 0 auto;	
	</style>	
</head>

<body>
<!-- 版心:网页的有效内容 -->
<!-- 版心居中 -->

	<div>版心</div>	
</body>	</html>

5.7外边距折叠现象-合并现象

        场景   垂直布局的块级元素   上下的margin会合并
        结果:最终两者距离为margin的最大值解决方法:避免就好
        只给其中一个盒子设置margin即可

<style>
span {
/* margin: 100px; */	
/* padding: 100px; */	
	line-height:100px;	
	</style>	
	</head>	
	<body>	

<!-- 行内元素内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->	
<!-- 行内标签的margin-top和bottom 不生效 -->
<!--行内标签的padding-top或botttom不生效 -->	
	<span>span</span>	
<span>span</span>
</body>
</html>

5.8外边距折叠现象-②塌陷现象

<style>
.father {
width: 300px; height: 300px;
background-color:pink;/* padding-top: 50px; */
/* 如果设计稿没有border，不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */}
.son[
width: 100px; 
height: 100px;
background-color:	Iskyblue;	
margin-top:50px;
display:inline-block;
</style></head>
 
<body>

场景   互相嵌套的块级元素，   子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
        1.给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
        2.给父元素设置overflow:hidden
        3.转成行内块元素
        4. 设置浮动文章来源地址https://www.toymoban.com/news/detail-492760.html

到了这里，关于css的基础认识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！