1-2、CSS基本语法+选择器

好运天天有，向我滚滚来

已于 2022-05-17 11:33:49 修改

阅读量766

点赞数

分类专栏：前端网页设计文章标签： java

于 2022-04-27 15:56:56 首次发布

本文链接：https://blog.csdn.net/fhefhffg/article/details/124453174

版权

本文详细介绍了CSS的基本语法，包括内部CSS、行内CSS和外部CSS的使用。此外，文章还涵盖了常用属性，如字体、背景、边框和盒子模型。在选择器部分，讨论了标签选择器、类选择器、ID选择器、通配符选择器和属性选择器，以及它们的组合和优先级。特别强调了类选择器在开发中的重要性，并提及Vue的v-bind在样式绑定中的应用。

摘要由CSDN通过智能技术生成

一、css语法：

格式：

选择器{ 属性名：属性值；属性名：属性值；...}

位置：

1、内部CSS-不常用：

在<head></head>里自己写个<style></style> 里面写选择器

2、行内CSS-复用性极低：优先级高于1、

3、外部CSS-常用：

不在head里写style了，直接新建一个CSS文件写CSS代码，网页代码就在自己建的HTML文件里写；再把外部CSS文件引入到这个网页中

引入代码<link rel="stylesheet" href="css文件路径+名字" />

常用属性

宽度              width: 300px;
高度              height：200px;

1、字体/文本属性

文字-字体属性：
设置文字颜色       color: green/#cc00ff/rgb(255,0,0);
                 预定义的颜色值/十六进制/RGB代码
                 十六进制用的最多：后面会用PS将颜色析取出来
设置文本横向对齐方式   字位置居中(水平居中)     text-align: center;
                       左对齐-默认           text-align: left;
                       右对齐                text-align: right;
设置文本纵向对齐方式   垂直居中--让文字的行高/高度等于盒子的高度 如上图所示
                     文字偏上--让文字的行高/高度小于盒子的高度
                     文字偏下--让文字的行高/高度大于盒子的高度             
装饰文本  没有装饰线 text-decoration: none; 默认  可以用来给a标签使用来取消超链接的下划线  通常用来消除下/上划线、删除线
         下划线 text-decoration: underline;               a标签超链接默认有下划线
         上划线 text-decoration: overline; 
         删除线 text-decoration: line-through; 
设置文本首行缩进    text-indent: 50px;
                   text-indent: 2em;em是一个相对单位，就是当前元素(font-size)1个文字的大小的距离