【CSS学习笔记1】css基础知识介绍

1.css简介

1.1css语法规范

选择器（给谁，比如标题：h、段落p、表格table）+声明样式

css写在<head></head>中用<style></style>包含

复制代码

<head>
  <style>
    /* 选择器 {样式}*/
    /*给谁改样式{改成什么样的}  */
    /*属性：xx；  */
    p {
            color: rgb(141, 86, 86);
            font-size: 20px; /* 字体大小px是像素的意思 */
            font-weight: bold;
        }
  </style>
</head>

1.2css代码风格

展开式风格、样式小写、属性冒号之后加空格、选择器和{之间加空格

2.CSS基础选择器

2.1选择器作用

选择标签

2.2选择器分类

基础选择器-由单个选择器组成：标签选择器、类选择器、id选择器、统配符选择器

符合选择器：

2.3标签选择器

标签名作为选择器div、p

某一类标签设置为统一样式

2.4类选择器

差异化选择不同的标签

在标签中要用class属性来调用class类

复制代码

<!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>
        /* 类选择器：样式 点定义  结构类调用 一个或多个 开发最常用*/
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        
    </style>
</head>
<body>
    <ul>
        <li class='red'>北京</li>
        <li class="blue">上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
</body>
</html>

"."后面紧跟类名，是我们自己命名的叫什么都行（这里的red），但是不能选择标签名如p、ul等等

不可使用纯数字、中文等命名且命名要有意义

用类选择器画盒子

给div着色

多类名

给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签

多个类名用空格隔开

可以吧一些标签元素相同的样式放到一个类中、浙西而标签都可以调用公用的鳄梨，然后再调用自己独有的类

节省css代码统一修改比较方便

比如：一个人有多个名字用空格分开

复制代码

<!-- <div class="red font35">刘德华 </div>包含两个类名 -->

2.5id选择器

id选择器可以为便有特定id的html元素指定待定的样式

html元素以id属性来设置id选择器，css中id选择器以**"#"**来定义

复制代码

#id名{
  属性1：属性值1；
  ...
}
#nav {
	color:red;
 }

与类选择器的区别是：只能调用一次别的不能用

类选择器与id选择器的区别

1）类选择器可以有多个也可以被别人使用

2）id选择器是唯一的不得重复

3）id选择器和类选择器最大的不同在于使用次数上

4）类选择器在i需改样式中用的最多、id选择器一般用于唯一性元素上，经常与javascript搭配使用

2.6通配符选择器

用**"*"**，选择所有的样式

2.7总结

3.CSS字体属性

使用font-family属性定义文本的字体样式

复制代码

p {font-family:"微软雅黑";}
div {font-family:rial,"Microsoft YaHei";}

font-family后如果跟多个字体，会先默认使用第一个依次逐个尝试

3.2字体大小

font-size:20px

标题的文字大小要单独使用

3.3字体粗细

font-weight

eg：加粗bold/700 通常用数字

单词不好记

可以修改标题（默认加粗）为不加粗格式

3.4文字样式

font-style

可以让倾斜的字体（如em）不倾斜

3.5复合属性

复制代码

div {
               font-family: 'Courier New', Courier, monospace;
               font-size: 20px;
               font-weight: 700;
               font-style: italic; 
        }

可以综合简写,先后顺序不可以颠倒 节约代码除了字体大小和字体样式之外其他的均可以省略

复制代码

div {
       /* 复合属性 简写的方式 */
               /* font:font-style  font_weight font_size/line_height folnt_family */
               font: italic 700 20px/2 'Courier New', Courier, monospace; 
        }

4.文本属性

文本为外观、颜色、对齐、装饰、缩进、行间距等

颜色- color ：pink 或者#ff0000十六进制或者rgb代码 rgb(255,0,0) 可以用吸管吸

对齐- text-align:center\right\left

装饰文本- text-decoration:none（可以用于取消链接的下划线）\underline\overline\line-through(删除线）

缩进- text-indent: 10px\2em(当前文字两个文字大小的缩进）仅针对首行文字

行间距 -line-height:26px (包含了文字大小）

5.css引入方式

1.内部样式表

在html页面内 style 与body局部分离

适合练习使用

2.行内样式表

样式要求简单就在行内修改就可以

复制代码

<div style="color red">红色</div>div>

3.外部样式表

.css文件

在html页面之外

要用link进行连接<link rel="stylesheet" herf="style.css">

6.新闻案例

搭建好html框架再进行css样式修改

图片加不了居中格式可以放在<p>中