CSS整理1

最新推荐文章于 2024-06-28 10:40:32 发布

pipasound

最新推荐文章于 2024-06-28 10:40:32 发布

阅读量181

点赞数 1

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/qq_61109509/article/details/120925652

版权

html+css 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

1，主要在<head></head>里面

2，css简介

<head>

<title>Document</title>

<style>

p{

/*属性前面，冒号后面，保留一个空格，结尾记得加分号*/

color: rgb(89, 45, 126) ;

/* 修改文字颜色 */

font-size: 12px;

/* 修改文字大小 */

}

</style>

</head>

一，基础选择器

1，标签选择器：可以把所有相同的标签选出来统一修改样式

<style>

p{

color: red;

}

</style>

</head>

<body>

<p i>迈克尔杰克逊</p>

<p class="red">pink老师</p>

</body>

2，类选择器：

<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>

#样式点.定义，结构类（class）调用,,开发最常用》

.red{

/*属性前面，冒号后面，保留一个空格*/

color: rgb(89, 45, 126) ;

/* 修改文字颜色 */

}

</style>

</head>

<body>

<p>有点意思</p>

<ul>

<li class="red">pipasound</li>

<li>pipa</li>

</ul>

</body>

</html>

1),可单独选择一个或某几个标签

2)，.后面的名词最好用英文表示，不能用汉字和纯数字表示

2.1，使用类选择器画盒子

<style>

.red{

/*属性前面，冒号后面，保留一个空格*/

background-color: rgb(89, 45, 126) ;#背景颜色

/* 修改文字颜色 */

width: 100px;#宽100像素

height: 100px;

}

.green{

/*属性前面，冒号后面，保留一个空格*/

background-color: rgb(14, 239, 247) ;

/* 修改文字颜色 */

width: 100px;

height: 100px;

}

</style>

</head>

<body>

<div class="red">红色</div>

<div class="green">绿色</div>

</body>

</html>

2.2，多类名

1，在标签class属性中写多个类名 2，多个类名中间必须用空格隔开（代码在下面）

3，id选择器

<style>
        /* id选择器口诀：样式#定义，结构id调用，只能用一次 */
        .red{
            color: red ;
        }
        .font{
            font-size: 35px
        }
        /* font-size字号大小  */
        #pink{
            color: plum;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔杰克逊</div>
    <div class="red font">pink老师</div>
</body>

4，通配符选择器

<style>

*{

color: red;

}

</style>

</head>

<body>

<p id="pink">迈克尔杰克逊</p>

<div>pink老师</div>

</body>

*可以选择所有标签统一修改样式，把span,div,li,ul等等标签都修改

三，css字体属性

1，字体系列：

注：1）各字体都用英文状态下的逗号隔开（电脑会顺着字体排列顺序查找该用户安装了哪各字体，找到后即使用）

2）如有空格隔开多个单词组成的字体，用引号

3）常见字体：body{font-family:'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';}

2,字号大小 font-size ...px

3,字体粗细 font-weight

700(加粗=bold)，400（不加粗=normal），值在100~700间

4,文本样式：font-style（斜体）italic (默认值)normal

注：平时我们很少给文字加斜体，反而给斜体标签（em,i）改为不斜体字体

<style>

/* 字体 */

p{

font-family: 宋体; font-size: 12px; font-weight: 700; /* font-weight: bold; */

font-style: italic;

}

</style>

</head>

<body>

<p>迈克尔杰克逊</p>

<div>pink老师</div>

</body>

5,font复合属性

格式：body{

font: font-style font-weight font-size/line-height font-family;

}

注：1）不能更换顺序，并且各个属性以空格隔开

2）font-size和font-family必须保留，其余可省略

3） font-size/line-height （16px/28px）

p{

font: italic 700 16px 'Microsoft yahei'

}

四，文本属性

1，文本对齐：text-align: center;

2,装饰文本：text-decoration none默认 underline下划线 overline上划线 line-through删除线

<style>

div{

/* text-decoration: underline; */

}

a{

/* 下面是删除链接的下划线 */

text-decoration: none;

}

</style>

<body>

<div>

pink老师

</div>

<a href="#">pipasound</a>

</body>

3,文本缩进

4，行间距 line-height

分为上间距，文本高度，下间距。其中文本高度保持不变，变的是上间距和下间距

<style>

p{

/* 文本第一行首行缩进多少字符 */

/* text-indent: 20px; */

/* em当前文字一个大小距离 */

text-indent: 2em；

line-height: 26px;

}

</style>

</head>

<body>

<p>爱是一道光</p>

</body>

二，样式表

1，内部样式表(嵌入式)：将css抽出来单独放在<style></style>

2，行内样式表：适合修改样式比较少的情况（仅仅放在body内）

<body>

<p style="color: red; font-size: 20px;">爱是一道光</p>

</body>

3，外部样式表：样式单独写入CSS文件中，再将CSS文件引入HTML

1）新建.css文件 2）用link标签引入文件

三，图片<img src="">不能居中对齐 ,

<p>

<img src=""/>

</p>

pipasound

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS整理1

1，主要在<head></head>里面2，<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>Docume...
复制链接

扫一扫