CSS的基础 - 技术栈

CSS美化HTML，布局网页
CSS最大的价值：由HTML专注去做结构呈现，样式给CSS，结构（HTML)与样式（CSS）相分离
CSS主要由选择器以及一条或多条声明
在<head></head>中实现CSS在<body></body>实现HTLM
语法格式：选择器{做什么}

css 复制代码

<head>
<style>
    p {
        color: red;//冒号是小写的，分号是大写的
        font-size: 12px;//冒号是小写的，分号是大写的.字体的大小
    }
<style>
</head>
<body>
    <p>有点意思</p>
</body>

空格规范
属性值前面，冒号后面，保留一个空格
选择器和大括号中间保留空格
选择器分为基础选择器和复合选择器
基础选择器分成标签选择器，优点是能快速为页面中同类型的标签统一设置样式
类选择器可以单独选一个或几个标签

css 复制代码

<style>
.red{
    color: red;//color: #ccooff;变成16进制的颜色双击可任意选取颜色
}
</style>
<body>
    <p class="red">是看得见</p>
    <p>是看得见</p>
    <p>是看得见</p>
</body>

可以理解为这个标签起了一个名字，来表示
长名称或词组可以使用中横线来为选择器命名
不能使用纯数字、中文等命名，尽量使用英文字母来表示
多类名的使用方式

css 复制代码

 <style>
 .red{
	color: red;
 }
 .green{
 	font-size: 100px;
 }
 </style>
 <body>
 	<p class="red green">是看得见</p>//可以同时使用red和green两个类。注意两个类中间要空格分开
	<p>是看得见</p>
	<p>是看得见</p>
 </body>

使用多类名可以将宽长放一个类，颜色放一个类
id选择器样式#定义，结构id调用，只能调用一次，有标签使用了，别的标签不能使用

css 复制代码

#pink{
    color: red;
}

<div id="pink"></div>

同配符选择器

css 复制代码

*{
    color: red;
}
<body></body>里面的所有的内容自动变成红色

CSS的字体系列
font-family属性定义文本的字体系列

css 复制代码

<head>
<style>
    p{
    font-size: '微软雅黑';
    font-weight: bold;//给字体加粗
    font-weight: 700;//开发的时候写数字。700等于加粗
    font-weight；400;//400等于不加粗等于normal开发写数字
    }
    
    p{
    font-family: 'Micorsoft YaHai', Arial,Helvetica;
    }
</style>
</head>
<body>
    <p class="red">是看得见</p>
    <p>是看得见</p>
    <p>是看得见</p>
</body>

px是像素的意思
字体之间必须使用英文状态下的逗号隔开
空格隔开的多个的单词组成的字体，加引号
使用系统默认的字体
可以直接给body直接输入字体
如果是标题的话，就算是在body{ font-size=12px；}标题部分也要自己在重新定义

css 复制代码

<head>
<style>
    em {
        font-style: normal;
    }
<style>
</head>
<body>
    <em>有点意思</em>
</body>

上述的代码可以复合起来，顺序是
font：斜体粗细字体大小字体样式
注意不能颠倒顺序
复合字体可以没有斜体和粗细但不能没有字体大小和字体样式
CSS提供了背景颜色半透明的效果

css 复制代码

background: rgba(0,0, 0, 0.3);//0.3也可以将.3

r代表红，g代表绿色，b代表蓝色，a代表alpha透明度
盒子背景半透明，不会影响盒子里面内容的