关于CSS_css有13px的字体吗-CSDN博客

css基础知识

##关于css
1.css的定义： css:cascading style sheets 层叠样式表, 规定了HTML标签在网页上的显示方式， HTML：规定网页上有什么内容。css：规定网页上这些内容的样式。
##css的优缺点以及和html对比
1.HTML跟CSS对比：
使用HTML写样式的痛点：
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好，搜索引擎更关心内容。
使用css的优点：
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容，对搜索引擎比较友好。
##css的基础语法
1.基础语法：
选择器{
属性: 属性值;（声明）
属性: 属性值;
}
选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。
2.声明：都是由属性和属性值组成的。中间用：，以分号结尾。
css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。
3.css分为五类：文本，盒子，浮动，定位，背景。注：盒子：宽，高，背景色，边框；文本：
字体，大小，颜色。

css应用以及演示

##css的样式
1.书写位置：.行内式，内嵌式，外链式，导入式。
2.行内式写法。直接写在标签style属性中
注：行内式：写法简单。
缺点：结构和样式没有分离，只对当前的标签生效，不能够复用。开发中不推荐使用。
3.内嵌式:写法:<style> ..... </style>
4.使用style标签，在head标签内。css属性写在style标签内。
缺点：如果样式比较多，页面代码会比较多。只对当前页面生效。如果说多个页面有共同的样式，需要写多次。
优点：结构和样式分离,样式可以复用。
5.外链式写法：<link rel="stylesheet" href="css/demo.css> 通过link标签，引入外部的css文件。
优点：结构和样式分离,样式可以复用,可以多个页面使用。
6. 导入式写法：

<style>
   @import url(css/demo.css);
 </style>

注：外链式：会先加载css，再去加载HTML页面。导入式：会先加载HTML页面，再加载css，不推荐使用导入式，使用最多的是外链式。

##css选择器
第一种是标签选择器，也成为元素选择器。标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。
第二种是类选择器，类选择器用来为一系列标签定义相同的呈现方式，常用的语法是.classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。
第三种是ID选择器，ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器：通过给标签设置一个ID值，然后通过这个ID值来选择标签。
1。写法：#id{ 声明； } 一个页面中ID值是唯一的，ID选择器只会选择一个标签。 id值的写法规范：以字母开头，后面可以是数字，下划线或横线。
2. 痛点：假如有多个标签，有同样的样式，使用ID选择器的时候，需要分别给他们设置ID值，然后再重复的设置一样的样式。
3. id常用场景：不是用来设置样式，配合js去添加事件的。
第四种是全局选择器，全局选择器就是对所有的htmlz元素起作用。语法格式为：*{propery:value}。其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。
##css实战模拟
1.将整个网页的字体设置为“微软雅黑”，字体大小是13px。css代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-family:Microsoft YaHei;
            font-size: 13px;
        }
         </style>
         </head>

2.p和h1元素内的背景颜色是黄色，字体颜色是蓝色。css代码如下：

<style>
h1{
    background-color: yellow;
     color: blue;
        }
  p{
      background-color: yellow;
      color: blue;
        }
<style>
        <body>
    <h1  >我的背景是黄色</h1>
    <p>字体颜色是蓝色</p>
    <span id="Orz">我的背景颜色是绿色</span>
    <p class="T_T">我的属性值是T_T，颜色是绿色，我文字居中</p>
    </body>

id属性命名为Orz的标签背景颜色是绿色。css代码如下：

<head>
<style>
        #Orz{
            background-color: green;
        }
<style>
        </head>
<body>
   
 <span id="Orz">我的背景颜色是绿色</span>
    <p class="T_T">我的属性值是T_T，颜色是绿色，我文字居中</p>
    </body>

4.所有class="T_T"的内容字体颜色是绿色，并且文字居中,代码如下：

<head>
<style>
 .T_T{
       color: green;
       text-align: center;
        }
<style>
 </head>
  <body>
        <p class="T_T">我的属性值是T_T，颜色是绿色，我文字居中</p>
        </body>

5.代码具体如下：
在这里插入图片描述
6.实战模拟效果图：

css注意事项

##css的定位概述
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。（摘自 SanRenYan）