前端学习day03--CSS

最新推荐文章于 2024-06-23 20:25:37 发布

W_jiaying

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量139

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/W_Chelsea/article/details/114844669

版权

CSS的学习

HTML的局限性
CSS--网页的美容师

HTML的局限性

丑

繁琐、臃肿

CSS–网页的美容师

层叠样式表（Cascading Style Sheets），也是一种标记语言，用作美化页面，布局页面。
功能：给谁去修改什么样式？

CSS语法规范

<style>
        /* 给谁改样式 {改什么样式} */
        ul {
            color:red;
            font-size: 20px;
        }
</style>

在这里插入图片描述

CSS代码风格

两种格式：
1.紧凑格式 ×
2.展开风格（一行一个属性）√
样式：小写
空格规范：
1.属性值的前面，冒号的后面，打一个空格
2.选择器和大括号中间保留一个空格

CSS基础选择器

作用：选择标签

类选择器

.类名 { 属性1: 属性值1;}
样式点定义，结构类调用

.green {
        color: green;
		}
......
<form target="www.baidu.com" method="GET" class="green"></form>

在这里插入图片描述

多类名

可以给一个标签指定多个类名。
多类名使用方式:

<div  class="类名一 类名二"></div>

id选择器

唯一，只允许一个标签调用

<head>
	<style>
		#pink {
            color: pink;
        }
	</style>
</head>
<body>
	<div id="pink">龚俊</div>
</body>

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

通配符选择器

通配符选择器，将所有标签都修改了

  * {
        color: rebeccapurple;
    }

CSS字体属性

字体系列

字体

使用font-family

        li {
            font-family: '宋体',Arial;
        }

1、多个字体由逗号分开
2、用引号进行包含，单引双引皆可
3、常见字体：

body {font-family: 'Microsoft YaHei',tahoma,Arial,'Hiragino Sans GB';}

字体粗细

使用font-weight

  /* 加粗 */
  /* font-weight：700  等价于 font-weight: bold*/
        .bold{
            font-weight: bold;
        }
/*font-weght:normal  等价于  font-weight:400*/
        h2 {
            font-weight: normal;
        }

文字样式

使用font-style

/* 让倾斜的字体正回来 */
        li {
            font-style: normal;
        }

字体的复合属性

body {font:font-style font-weight font-size/height font-family}

必须保留size和family

文字对齐

div {
            text-align: center;
        }

在这里插入图片描述
😴困！！！！！！！11

W_jiaying

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习day03--CSS

CSS的学习HTML的局限性CSS--网页的美容师CSS语法规范CSS代码风格CSS基础选择器类选择器多类名id选择器通配符选择器CSS字体属性字体系列HTML的局限性丑繁琐、臃肿CSS–网页的美容师层叠样式表（Cascading Style Sheets），也是一种标记语言，用作美化页面，布局页面。功能：给谁去修改什么样式？CSS语法规范<style> /* 给谁改样式 {改什么样式} */ ul { color:red;
复制链接

扫一扫