当前位置: 首页 > news >正文

html 和css基础常用的标签和样式(2)-css - 实践

1.css三种引入方式:

        1.第一种,内联,也就是也在标签里面。(一般不用)

        2.第二种,内部,也就是写在style中。(一般不用)

        3.第三种,外部,也就是单独创建一个css文件,把样式写里面。(常用)

2.css的引入具体实现:

        1.内联样式:(写在style后面,单独写)

我是一个p标签

        2.内部样式:写在head的中间

Document

        3.外部样式:单独写一个css文件,用link引入,在href中写css的文件名

Document

3.关于css中的常用属性:

px:长度,也就是1个像素。

em:比如上面有一个属性是2px,你1em也就是2px。

src:也就是文件的路径url。

color:颜色,可以reg 和16进制写法

font-size:字体大小

background-color:背景颜色

height:高度,一般用在块标签中

width:宽度,也一样

color - 文字颜色

font-family - 字体

font-size - 字体大小

font-weight - 字体粗细

font-style - 字体样式(斜体等)

line-height - 行高

text-align - 文本对齐

text-indent - 首行缩进

letter-spacing - 字母间距

word-spacing - 单词间距

text-transform - 文本转换(大小写)

列表相关

list-style-type - 列表标记类型

list-style-position - 列表标记位置

其他

visibility - 可见性

cursor - 鼠标光标

visibility - 可见性

cursor - 鼠标光标

不会继承的样式(常用)

盒模型相关

width / height - 宽高

margin - 外边距,外填充

padding - 内边距,内填充

border - 边框

background - 背景

display - 显示方式

定位相关

position - 定位方式 (float / absolute / relative / flex)

top / right / bottom / left - 定位位置

float - 浮动

clear - 清除浮动

其他

overflow - 溢出处理

z-index - 层级

opacity - 透明度

4.关于选择器:

  1. 基础选择器
  2. 关系选择器
  3. 属性选择器
  4. 伪类选择器
  5. 通配符选择器

基础选择器:

class=A                     id = B                    元素 div

1.用点A,.A{} 就是类选择器,

2.用#B,则#B{}就是id选择器

3.直接用div,就是div{}选择器

关系选择器:

1.用div.A{}  就是交集

2.用逗号连接的 比如:A , div.A {} 并集选择器

3.后代选择器:如果A 中包含B ,用 .A B {} 

4.亲子选择器:.A>B{}

5.关于块级元素

常见的块级元素有:body,div,p,h1~h6,ul,ol,li,pre等

就是块级元素,会独占一行,其他元素没办法加到他们后面,但是可以设置宽高等填充

常见的行内元素有:a,span 等,可以加在后面但是没办法变大,加宽

通过display:inline可以将元素显示设置为内联元素,如下的代码就是将块级元素div转成内联元素,从而使div元素具有内联元素的特点(这个是重点:)

6.关于css的布局(重点重点)

position:static 属于默认的位置

position:relative,是相对于自己,去改变位置,但实际的位置没有改变,只是视觉上改变了

position:absolute绝对定位,相对于最近的祖先元素定位,但祖先元素不能是static 没有祖先的话,就是视口,也就是窗口,随着窗口变化也会变化。

position:flexd相当于导航栏,固定不动的,就算滑动整个窗口也不会动。

Document

黑色是不动的,

http://www.jsqmd.com/news/62808/

相关文章:

  • 计算粗心马虎纠正初中数学辅导精选:从根源培养严谨习惯,有效减少不必要的失分
  • 二极管三极管静态参数测试仪系统设备STD2000X--半导体领域和制造领域 - FORCREAT
  • 2025年上海AI搜索结果优化渠道权威推荐榜单:上海AISEO机构/上海GEO关键词优化代运营/上海AI结果优化营销服务商综合评测
  • 完整教程:一篇最全Python 爬虫超详细讲解(零基础入门,适合小白)
  • 详细介绍:“AI+XR”赋能智慧研创中心:告别AI焦虑,重塑教师未来
  • 昆明婚纱摄影店榜上的浪漫选择
  • CAP博客集合
  • 【SPIE出版 | EI检索】第七届光电材料与器件国际研讨会(ICOMD 2025)
  • 2025年中国五大振动传感器品牌推荐:传感器售后服务哪家好?
  • 2025年智能传感器五大品牌推荐榜单,看哪家口碑好
  • 2025年Q4销量认证公司TOP5推荐:五个品牌权威测评,多维度合规选购全指南
  • Java 包装类(Wrapper Class)详细解析
  • 2025年Q4顶尖内容审核公司推荐:AI驱动合规时代的全场景防护指南
  • excel导入导出 - 详解
  • 普通莫队板子
  • 年度绩效考核推进需要注意的五大事项
  • 2025年N2氮气发泡罐批发厂家权威推荐榜单:鞋底中底发泡罐/体育器材发泡罐/高压发泡罐源头厂家精选
  • 初中数学培训全托辅导机构哪里找:全天候个性化管理,实现数学成绩全面提升的优质选择
  • 2025最新推荐!AI写作工具测评榜单,学术价值最大化
  • rust语言声明式宏特殊标识符$crate
  • 2025年面包培训正规厂商推荐,专业面包培训公司与学校排名全
  • 基于MATLAB的最小生成树求解
  • 2025年潍坊西门子直流电机维修公司权威推荐榜单:直流伺服电机维修‌/直流牵引电机维修‌/ABB直流电机维修‌‌源头公司精选
  • 2025年码头护舷订做厂家权威推荐榜单:圆筒型护舷‌/定制护舷‌/防撞护头‌‌源头厂家精选
  • 项目经理需要具备哪些硬技能与软技能?
  • 2025保安过滤器厂家综合实力榜:上海青上过滤稳居行业首选
  • 2025年钛棒过滤器权威榜单揭晓!上海青上过滤以技术革新领跑行业
  • 冒号排序
  • 微孔板恒温振荡器哪家性价比高?瑞诚仪器产品质优价廉
  • 服务好的大型工厂车间降温工业冷风机公司,车间厂房工厂通风降温/铁皮车间降温/陶瓷车间降温/炼钢车间通风降温工业冷风机公司排行榜