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-size
/* 标题标签比较特殊,需要单独制定大小 */
body {
font-size: 30px;
}
h2 {//标题标签
font-size: 40px;
}
字体粗细
使用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