CSS学习笔记

最新推荐文章于 2023-12-12 11:59:44 发布

study_azhuo

最新推荐文章于 2023-12-12 11:59:44 发布

阅读量182

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/study_azhuo/article/details/108310130

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 内联样式

通过标签的style属性来设置元素的样式

<标签名 style=“属性1:属性值1; 属性2:属性值2”> 内容 </标签名>

如：<div style="color:red;">hello css</div>

2. 内部样式

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2
    }
</style>
</head>

<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>

3.外部样式

将所有的样式放在一个或多个以 .CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

语法

CSS基础选择器分类

1.标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}

<p class='类名'></p>

3.类选择器特殊用法- 多类名

给标签指定多个类名，从而达到更多的选择目的

注意：各个类名中间用空格隔开

<div class="pink fontWeight font20">亚瑟</div>

4.id选择器

id选择器使用#进行标识，后面紧跟id名

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

注意：W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

5.通配符选择器

通配符选择器用*号表示， * 就是选择所有的标签

{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

CSS复合选择器

1.后代选择器

用来选择元素或元素组的子孙后代

父级子级{属性:属性值;属性:属性值;}

.class h3{color:red;font-size:16px;}

2.子元素选择器

只能选择作为某元素子元素(亲儿子)的元素。

.class>h3{color:red;font-size:14px;}

3.并集选择器

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式

.one, p , #test {color: #F00;}

4.链接伪类选择器

a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */

属性

1.font字体

font-size:大小

font-size属性用于设置字号

font-size:20px;

注意：不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

font-family:字体

font-family属性用于设置哪一种字体。

p{ font-family:“微软雅黑”;}

p{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。

font-weight:字体粗细

font-style:字体风格

font:综合设置字体样式

选择器 { font: font-style font-weight font-size/line-height font-family;}

注意：

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

2.CSS外观属性

color:文本颜色

text-align:文本水平对齐方式

注意：是让盒子里面的内容水平居中，而不是让盒子居中对齐

line-height:行间距

用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

line-height: 24px;

text-indent:首行缩进

/首行缩进2个字 em 1个em 就是1个字的大小/
text-indent: 2em;

text-decoration 文本的装饰

用于给链接修改装饰效果

3.标签显示模式（display）

块级元素（block）

常见的块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素（block）

常见行内元素

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

特点

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

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

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

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

注意

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

行内块元素（inline-block）

常用的行内块元素

<img />、<input />、<td>，可以对它们设置宽高和对齐属性

特点

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

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

（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

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

4.行高（line-height）

使用行高实现单行文字垂直居中

文字的行高等于盒子的高度

5.背景(background)

背景颜色background-color

背景图片background-image

背景平铺background-repeat

背景定位background-position

背景附着background-attachment

study_azhuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

1. 内联样式通过标签的style属性来设置元素的样式<标签名 style=“属性1:属性值1; 属性2:属性值2”> 内容 </标签名>如：<div style="color:red;">hello css</div>2. 内部样式将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义<head><style type="text/CSS"> 选择器（选择的标签） { 属性
复制链接

扫一扫

专栏目录