我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

CSS基础 郑强 20230207

[复制链接]
郑强学员认证 发表于 2023-2-7 22:51:01 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  • css的样式

    • 行内样式表(行内式)
      • 在元素的标签内部的style属性中,设定CSS样式,适用于简单的样式修改。
      • 注意点:
        • style其实就是标签的属性
        • 在双引号中书写样式,格式要符合css规范
        • 书写比较繁琐,不推荐使用

    • 内部样式表(嵌入式)
      • 内部样式表就是在<head></head>标签中的<style></style>标签中书写样式
      • 注意点:
        • 可以更加方便的控制多个元素的样式
        • 代码结构比较清晰,实现了结构和样式的部分分离(不完全分离)
        • 练习时,经常采用这种方式

    • 外部样式表(链接式)(开发中最常用,实现了结构和样式的完全分离)
      • 可以使用链接的方式引入外部样式文件
      • 使用步骤
        • 1、创建css文件
        • 2、使用link标签引入css文件即可(link标签一般写在head标签中)
          • rel   定义当前文档与被链接的文档之间的关系,stylesheet表示被链接文档是一个样式表文件
          • href  定义链接的文件的路径(URL),可以使用绝对路径也可以使用相对路径

        • css文件
        • 引入css文件
  • Emmet语法
    • 作用:可以提高HTML和CSS的编写速度
    • 常用的语法有
      • 1、输入div 按tab键能快速补全标签
      • 2、一次生成多个标签 div*5
      • 3、生成父子级关系标签 div>p
      • 4、生成兄弟关系标签 div+p
      • 5、生成带有类名为demo的p标签  p.demo
      • 6、生成带有id属性的标签
      • 7、使用自增符号生成顺序内容
      • 8、生成标签时直接添加内容
      • 9、快速生成css代码
  • CSS的复合选择器
    • 就是对基础选择进行组合而形成的选择器
    • 优点:可以更加高效的选择目标元素
    • 常用的复合选择器
      • 后代选择器
        • 后代选择器又叫做包含选择器,是选择某个父元素下面的子元素。
        • 语法:元素1  元素2 {样式声明}     选择元素1中的所有元素2(所有复合条件后代都可以被选中不局限于到底是儿子还是孙子)

      • 子选择器
        • 子元素选择器就是只能选择复合条件的最近的一级子元素,简单来说就是选亲儿子元素
        • 语法   元素1 > 元素2  {样式声明}   表示选择元素1里面最近的一级元素2

      • 并集选择器
        • 并集选择器就是用多组标签来构成,同时为他们定义相同的样式,通常用于集体样式声明,并集选择器中的各选择器之间用逗号隔开。

      • 伪类选择器
        • 链接伪类选择器
          • 给链接来添加特殊效果的选择器
          • :link  选择所有未访问过的链接
            • 使用方式 a:link
          • :visited  选择所有已经被访问的链接
            • 使用方式a:visited
          • :hover 选择鼠标指针悬浮的链接
          • :active  选择所有鼠标点击时的链接
          • 例  尽量采取 link visited hover active 的顺序。(lovehate)
        • 焦点伪类选择器
          • :focus 伪类选择器用于选取获得焦点的表单元素,一般情况下在<input>表单元素中使用

        • 伪类选择器的总结
          • 伪类选择器和css的类一样,可以附加在其他的选择器之上
          • 如果想使用伪类选择器,首先选择器选中的标签必须要支持这种伪类状态
  • CSS的元素显示模式
    • 什么是元素的显示模式
      • html里面的元素(标签)是以什么方式进行显示的,比如<div>自己占一行,比如一行可以放多个<span>
    • 元素显示模式的分类
      • 块元素
        • 常见的块元素
          • <h1>~<h6>、<p>、<div>、<ul>、<ol>、<dl>等等
        • 特点:
          • 1、自己独占一行
          • 2、高度宽度可以自由设置
          • 3、宽度默认是父级宽度的100%
          • 4、块级元素内可以放行内元素、行内块元素或者块元素
          • 5、文字类的元素中不要使用块元素(如果使用会造成语义混乱)
      • 行内元素
        • 常见的行内元素
          • <span>、<strong>、<em>、<ins>等等
        • 特点
          • 1、相邻的行内元素在一行上显示,一行可以显示多个
          • 2、宽和高设置无效
          • 3、默认的宽度是它本身内容的宽度
          • 4、行内元素只能容纳文本或者其他行内元素
        • 注意点:
          • 链接里面不要再套链接。
          • 特殊情况下如果<a>标签中需要放块级元素,可以将<a>标签转化为块级元素更安全
      • 行内块元素
        • 常见的行内块元素
          • <img>、<input>、<td>等等,同时具有块元素和行内元素的特点。
        • 特点:
          • 1、相邻的行内块元素在一行上显示,但是它们之间会有空白间隙。(行内元素特点)
          • 2、宽高可以设置(块级元素特点)
          • 3、默认宽度是它本身内容的宽度(行内元素的特点)
    • 元素模式的转换
      • 转换为块元素:display:block;
      • 转换为行内元素:display:inline;
      • 转化为行内块元素:display:inline-block;


回复

使用道具 举报

关注0

粉丝0

帖子4

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026