(前端)html与css，css 1、css基础

css概念

css:cascading style sheets层叠式样式表，规定了html标签在网页上的显示样式
html4的时候，w3c组织将html的结果和样式做了分离。
前端三层:
html 结构层，打开网页的整体架构。
css 样式层，装饰页面。
JavaScript 行为层，一些页面交互效果。

css作用

css两个重要的概念:层叠式，样式。
某一个标签有什么样式，直接将对应的属性及属性值罗列出来。
①css样式设置的时候，有两个关键:选择器，样式表。
②给盒子添加属性进行结构布局。

初步了解css的几个小样式

①文本样式
字体、颜色、大小
大小:font-size本身是一个复合属性font，里面的单一属性需要用font-单一属性名。
属性值:以像素为单位。
颜色:color，属性有几种经选择方案:十六进制，RGB,rgba，颜色名(英文)。
白色的几种表示方法
#ffffff，rgb(255,255,255),white
color: gold
字体:font-family复合属性的一个单属性，分中文字体和英文字体。书写的时候将英文字体写在前面，中文字体写在后面。
英文常用字体:Arial,consolas
中文字体:默认为宋体，常用字体有宋体，微软雅黑。所有电脑都有宋体，写字体时标注好备选字体。
字体用引号包裹，字体之间用逗号隔开，表示或。
当文本全是中文时，它会跳过英文字体去寻找你设置的中文字体，如果电脑里没有隶书就会继续向下找变为微软雅黑。
为了追求加载速度，将一些中文字体的名字写成英文表示法。
微软雅黑:Microsoft Yahei
宋体:SimSun

②盒子实体化基本属性
实体化:给盒子宽、高、背景色、边框。
宽度:width属性值是像素为单位。
高度:hright属性值是像素为单位。
背景色:background-color,属性值就是颜色色值。
边框:border，复合属性，有多个属性值，属性值之间用空格隔开，边框的宽度、颜色、线的类型。
实线边框solid

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: gold;
            color: red;
            font-weight: bold;
            font-size: 40px;
        }
        p{
            font-size: 30px;
            font-family: "Arial","隶书","微软雅黑","宋体";
            width: 200px;
            height: 200px;
            background: lightblue;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div>这里是文字</div>
    <p>字号大小和字体</p>
</body>
</html>

View Code

效果图↓