小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
font属性
<!--
字体属性
font-family 字体系列(微软雅黑、宋体~),可以直接给body指定
font-size 字体大小(多少px)
font-weight 字体粗细(多少)
font-style 字体风格(是否是斜体)
字体复合属性font
格式要求:font :font-style font-weight font-size/line-height font-family
必须保留font-size和fony-family属性,否则font属性不起作用
-->
<!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>字体属性</title>
<style>
h2 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* 可以使用英语的逗号来加上多个字体,字体内部空格来分开单词
类似兼容浏览器字体*/
font-size: 20px;
font-weight: 400;
font-style:italic;
}
body {
font-size: 20px ;
font-weight: 700;
/* 实际开发中更提倡使用数字表示加粗或变细,正常是400,bold是700,不用加px */
}
/* 标题标签比较特殊,需要单独指定 */
em {
font-style: normal;
}
div {
font: italic 700 16px Georgia;
}
</style>
<img src
</head>
<!--
<em>,<i>是倾斜字体的标签
-->
<body>
<h2>title</h2>
<p>五项原则</p>
<p>我下周一二</p>
<p>在拿到合同</p>
<p>中午和你说话你就不用管</p>
<em>下课了啊</em><br>
<i>想你的也</i><br><br>
<div>三生三世十里桃花</div>
</body>
</html>
选择器
<!--
CSS代码规范:
属性的冒号之后留一空格
{之前留一空格
-->
<!--
选择器类型:
标签选择器 html标签名就是选择器,只能选择某一类标签,不能差异化选择同一类
类选择器 在<styl>中 .~~~ 定义类选择器,名字写代码的起,然后在标签中用class来引用
口诀:样式点定义,结构类调用,一个或多个,开发最常用
类选择器——多类名 一个标签可以指定多个类名,到达组合的效果
id选择器 HTML元素以id属性来设置id选择器,css中id选择器以 # 来定义
口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
通配符选择器 用 * 定义,选取页面中所有元素(标签) 不用加名称也不用调用
-->
<!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>CSS开始</title>
<style>
/* 选择器{样式} */
/* 给谁改{改什么} */
/* 选择器就是选择标签而已 */
p{
color: brown;
font-size: 120px;
}/* 给下面的p标签修改样式,每一组属性后面都要加分号,<style>写在<head>标签中 */
div{
color: coral;
}
/* 类选择器 */
.red {
color: darkblue;
}
.fsize {
font-size: 100px;
}
#pink {
color: pink;
}
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
</style>
</head>
<body>
<p>有点意思</p>
<p class="red">男</p> <!--class引用-->
<p>女</p>
<!-- 类选择器——多类名使用 -->
<div class="red fsize">华为</div>
<!-- id选择器使用 -->
<h6 id="pink">I'm a young boy.</h6>
</body>
</html>