CSS笔记1

CSS

1.CSS语法规范和代码风格

语法规范

  • 选择器（用于指定CSS样式的HTML标签）
  • 一条或多条声明(属性和属性值以键值对的形式出现)

代码风格

  • 小写

  • 空格规范

    • 冒号后保留一个空格
    • 选择器和{直接留一个空格

  • 展开书写

    1
    2
    3
    4
    h3 {
      color: pink;
      font-size: 10;
    }

2.css选择器

作用

根据不同需求选择不同标签

分类

基础选择器

  1. 标签

    1
    2
    3
    4
    标签选择器{
        属性：属性值
        ...
    }
    属性：属性值
...

    }

  2. 类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .类名 {
        属性1: 属性值1;  
        ...
    } 
    结构需要用class属性来调用  class  类的意思
     <div class="类名"> 变红色 </div>
    1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
    2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
    3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
    4.可以理解为给这个标签起了一个名字，来表示。
    5.长名称或词组可以使用中横线来为选择器命名。
    6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。
    7.命名要有意义，尽量使别人一眼就知道这个类名的目的。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签.
    简单理解就是一个标签有多个名字. 

    多类名的具体使用：
        1. <div class="red font20">亚瑟</div>
    注意：
        1.在标签class 属性中写 多个类名
        2.多个类名中间必须用空格分开
        3.这个标签就可以分别具有这些类名的样式
       
    多类名开发中使用场景
    (1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
    (2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
    (3) 从而节省CSS代码,统一修改也非常方便
    1
    2
    3
    4
    5
    案例
    用 
    background-color
    width
    height 三个属性修改div

    ​

  3. ID

    1
    2
    html元素以id属性设置选择器，css以#+选择器定义

    id与类选择器区别

    1
    2
    id只能使用一次，好比身份证号，唯一
    类可以有好多标签同属一个类

    ​

  4. 通配符

    1
    2
    3
    * {
      color: red;
    }

    选取页面中所有元素

复合选择器

3.css字体

字体系列

1
2
font-family:'Microsoft YaHei',Arial;
设置多个字体时，第一个系统找不到后用第二个，以此类推

字体大小

1
2
3
font-size: 20px;
单位px，Google默认16px;
直接对body标签设置字体大小时，里面的h标签需要单独设置

字体粗细

1
2
font-weight: normal(400),/*默认-->*/,bold(700),number(100-900);
font-weight:700; 等价于bold;

让加粗标签不变粗

文字样式

1
font-style: italic;倾斜

字体复合属性

1
2
3
字体属性简写的方式,节约代码
font: font-style font-weight font-size/line-height font-family；
不能随意更改顺序，必须有size,family属性

4.css文本属性

文本颜色

1
2
3
color: red; 预定义的颜色值
color: #ff0000; 16进制表示 最常用
color: rgb(255,0,0);

文本对齐

1
2
3
文本内容水平对齐
text-align left(默认),center,right;
本质是让盒子里的文字水平对齐

装饰文本

1
2
3
4
5
text-decoration: none;
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线 */
text-decoration: line-through;/*删除线*/

==删除链接下划线==

1
2
3
a {
  text-decoration: none;
}

文本缩进

1
2
3
4
5
6
7
p {
	text-indent: 20px;
  	text-indent: 2em; 缩进当前元素两个文字大小的距离
  					 em相对单位，font-size 一个文字的大小
}


行间距

1
2
3
4
p {
  line-height:
}
上间距+文本高度+下间距=行间距

5.css引入方式

内部样式表

1
把所有css代码放到<style></style>标签中，在html页面内部

行内样式表

1
2
3
直接在标签内部写上style属性，如
<div style="color: red; font-size: 12px"></div>

外部样式表

1
2
3
4
开发中使用最多
单独写到CSS文件中，再引入HTML文件中
1.新建.CSS后缀文件(文件里只有样式没有标签)
2.<link rel="stylesheet" href="文件路径">

6.chrome调试工具

  1. F12打开
  2. ctrl+滚轮放大缩小2 ctrl+0 复原浏览器大小
web > CSS
#CSS
CSS笔记1
https://wjcbolg.cn/2023/04/20/CSS1/
作者
JasonWang
发布于
2023年4月20日
许可协议
BY-JW