菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 赵强-20221012-CSS1 [打印本页]

作者: BlueFlame 时间: 2022-10-12 23:39
标题: 赵强-20221012-CSS1
一、今日所学内容
CSS
（1） css的基本概念
         css是层叠样式表（Cascading Style Sheet）的简称，CSS也是一种标记语言，可以给HTML书写出来的网页设置不同的样式
（2） css的语法规范
         h1{color：red;font-size:14px;}
         选择器{
      属性：属性值;
      属性：属性值;
      }
         语法注意点：
1.选择器是用于指定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式
2.属性和属性值是以“键值对”的形式出现
3.属性是一种特定的样式属性，例如：字体颜色，字体大小等等
4.属性和属性值之间要用英文的“：”隔开
5.多个“键值对”之间要用英文的“；”隔开
         样式一般写在head标签中的style标签内（练习样式的主要用法）
（3） css的基础选择器
1.标签选择器（元素选择器）：是指用HTML标签名作为选择器，对页面中说有的符合条件的一类标签来指定统一的CSS样式
      语法：
      优点：能快速设置页面中一类标签的样式
      缺点：不能差异化设置页面样式
2.类选择器：差异化选择不同的标签，可以使用类选择器
      语法：
      语法注意：
            1.类选择器要用英文的"."来定义，后面要跟类名
            2.长类名一般可以使用横线来进行连接
            3.不要用纯数字、中文等进行命名，要使用英文字母来命名
            4.类的命名要有意义，尽量使他人一眼就能识别的目的
      多类名的使用
            1.在标签class属性中写多个类名可以进行多类名调用
            2.多个类名之间要用空格隔开
            3.调用完后就会显示所有被调用类名所声明的样式
3.id选择器：id是唯一的标识，所以id选择器主要是为了唯一的id的HTML元素来指定特定的样式
         id选择器用“#”来进行定义，用id来进行调用
id选择器和类选择器之间的区别
      1.类选择器好比人名，一个人可以有多个名字，同一格名字也可容易被多个人使用
      2.id选择器相当于身份证号码，全国唯一，不得重复
      3.id选择器在一个网页中只能使用一次，类选择器可以使用多次
      4.类选择器在修改样式中使用的频率最高，id选择器一般用于页面的唯一性的元素上，经常搭配JS使用
4.通配符选择器：在CSS中，通配符选择器用“*”来定义，他表示选择页面得所有元素
         通配符选择器不需要进行调用，可以直接给所有元素设置样式
  （4） css的字体属性
font-family（字体外观）
      注意：
1.各个字体之间必须使用英文的“,”来隔开
2.一般情况下，进行使用系统默认的字体，保证在任何用户浏览器中都可以正确显示
3.如果字体名字之间有空格，要用“”隔开
      CSS Unicode字体
在CSS的字体设置中，如果要避免乱码可以使用Unicode编码开进行字体声明
常用Unicode
font-size(字体大小)
      1.一般设置字体的设置单位为px(像素值)
      2.谷歌浏览器默认字体大小是16px
      3.不可以给body表签中指定文字大小样式，来改变整个页面的文字大小
      4.不同浏览器可能默认显示的字体大小不一样，我们尽量设置一个明确的字体大小，不要使用默认大小
font-style（字体样式）
      常用的属性值有：
normal：默认值，浏览器会显示标准的字体样式
italic：将字体调整为斜体
注意：平时我们很少将文字添加斜体样式，反而更多的是将斜体调整为正常样式
font-weight(设置字体粗细)
         CSS中用font-weight设置文本的粗细
         常用数值：
400代表正常字体粗细
700代表加粗文字粗细
注意数值后面不要带单位

（5）  字体的复合性
字体属性可以把以上的文字样式进行综合书写，这样可以使代码更加精简，开发中也经常采用这种方式
语法格式：
      font: font-style font-weight font-size /line-height font-family
注意点：
      使用font属性时，必须按照严格的语法格式中属性的顺序来写，不可以随便更换顺序，各个属性要用空格隔开
      可以省略的值：font-style和font-weight
      不可以省略的值：font-size和font-family
      line-height是为了设置行高
具体的像素值设置和倍数设置都可以

  （6） CSS的文本属性
文本颜色
      可以使用16进制、RGB以及英文单词来表示颜色，实际开发中最常用的是16进制颜色
文本对齐
      text-align-center居中对齐
      text-align-right  靠右对齐
      text-align-left 靠左对齐
文本装饰
      text-decoration属性来设置文本的装饰，使用最多的属性值是line-through（价格删除样式）none(超链接取消下划线)

  /* 1.默认值是none，代表没有文本装饰 */
         text-decoration: none;

         /* 2.给文本增加下划线 */
         text-decoration: underline;

         /* 3.给文本添加删除线 */
         text-decoration: line-through;

         /* 4.上划线 */
         text-decoration: overline;

            文本缩进
      text-indent属性来对指定的属性对指定文本的第一行进行缩进
可以使用具体的像素值来进行缩进
         text-indent: 60px;
使用em单位来进行缩进
         text-indent: 2em;
em是一个相对单位，就是当前元素的一个文字的大小，所以想要缩进两个font-size单位时，将text-indent的值写成2em即可
行间距
      line-height属性用于设置行间距（行高）
      可以写具体的像素值，也可以用倍数来进行设置
（7）  CSS的三种引入方式
行内样式表（行内式）
      行内样式表是在元素标签内部的style属性中来设置CSS样式，适合于简单的样式修改
      注意：
1.行内样式书写的时候要符合CSS的书写规范
2.样式要写在style属性中，要用双引号来引起来
3.书写繁琐，没有实现结构样式分离
内部样式表（嵌入式）
      写到html页面内部的，将所有的CSS代码都写到style
外部样式表（链接式）
         外部样式表是我们在实际开发中最常用的方式，首先创建一个css文件中，放入我们所需要多的样式，然后再html文件中引入样式文件即可
         引入外部样式表的步骤
1.创建后缀名为.css的样式文件
2.在HTML文件中，使用<link>标签引入
      link属性
rel:定义当前文档于被链接文档的关系，这里直接写成stylesheet即可，表示被链接的文档是一个样式表文件
（8） Emmet语法
1、直接输入标签名按tab键可以直接补全标签
2、可以一次性生成多个标签 div*5可以直接生成5个div标签
3、生成父子级标签  div>p
4、生成兄弟级的标签 div+p
5、生成带id属性的标签 #one 来生成如下结果
6、生成带类名的标签 .red生成如下标签
7、可以用$来实现自增 p.demo$*5可以实现如下结果
8、可以使用{}来给标签内写内容 div{我是个超级好的人，是不是呢？是}*5 可以生成五行代码
9、快速生成css代码 tac 生成如下代码
二、今日遇到问题：
   在超链接中修改超链接中的重点字设置样式，改变颜色和下划线颜色
三、解决方法
   在超链接中选中需要调整的字样，利用<span>标签设置颜色，再通过text-dectoration：underline设置下划线，最终解决

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)