ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

关于我和前端的那些事(1)

2022-07-27 01:32:24  阅读:163  来源: 互联网

标签:font 标签 前端 那些 关于 文本 选择器 CSS 属性


    CSS的第一天学习

1.CSS介绍


CSS一般是放在head部分,这样CSS就和body部分分开了。

2.标签选择器

CSS在head部分是style标签,然后style由选择器(标签名字)+花括号组成,其中花括号里写入键值对(什么属性以及属性值)。
属性值之间用冒号分隔,每个属性值最后用分号结尾。

3.类选择器

单独修改某一个或几个标签名字一样的标签,可以用类选择器。
类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用。

3.1多类名

多个类名,类名间用空格分开

会同时拥有两个类的属性。

4.id选择器

元素以id属性来设置id选择器,CSS中id选择器以"#"来定义,
id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿调用。

5.通配符选择器

通配符选择器使用"*"定义,它表示选取页面中所有元素(标签),
*把全部标签都改成了指定的颜色,但前提是没有指定的标签才生效,否则一样是按照原本class或id标签的指定生效。


6.CSS字体属性

fonts属性用于定义字体系列、大小、粗细、和文字样式(如斜体)

6.1字体系列

CSS使用font-family属性定义文本的字体系列,
后面可以接多个字体,如果系统没有第一个字体,就会检索下一个字体,以此类推。

6.2字体大小

CSS使用font-size属性定义字体大小,px(像素)大小是常用的单位,标题标签比较特殊需要单独指定大小。

6.3字体粗细

CSS使用font-weight属性设置文字字体的粗细,
不加粗就用font-weight=400或者normal。

6.4文字样式

CSS使用font-style属性设置文本的风格。

字体复合属性

字体属性可以把以上文字样式综合来写:
1.顺序固定,不能更换顺序(样式、粗细、大小、字体),各属性空格隔开。
2.不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。


7.CSS文本属性

CSS文本属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

7.1文本颜色


color属性用于定义文本的颜色

7.2对齐文本 text-align属性用于设置元素内文本内容的水平对齐方式
(默认是左对齐)

7.3装饰文本

text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。
取消a标签网址的默认下划线或者颜色
(主要要知道如何添加和删除下划线)
如:

  • 我是默认的,没有装饰线
  • 下划线(常用)
  • 上划线(几乎不用)
  • 删除线(不常用)

7.4文本缩进

text-indent属性用来指定文本的第一行的缩进,通常是讲段落的首行缩进 em是一个相对单位,就是当前元素(font-size)1个文字的大小。

7.5行间距

line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。

8.CSS的引入方式

8.1CSS的三种样式表

按照CSS样式书写的位置,CSS样式表可以分为三大类:

1.行内样式表(行内式)

适合修改简单样式

2.内部样式表(嵌入式)

(上面的CSS都是属于嵌入式)
内部样式表是写到html页面内部,将所有CSS代码抽取出来,单独放到一个style标签中。
style标签理论上可以放在html文档的任何地方,但一般会放在文档的头部head标签。

3.外部样式表(链接式)

样式单独写到CSS文件中,之后把CSS文件引入到html页面中使用
两步走:

3.1.建一个css的文件,把所有css代码放里面。
3.2.在html页面中,使用link标签引入文件。

今天的CSS学习结束啦,咱下篇文章见啦!!!

标签:font,标签,前端,那些,关于,文本,选择器,CSS,属性
来源: https://www.cnblogs.com/cgj-blogs/p/16523228.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有