css学习day01

复制代码
<!--
            HTML:Hyper Text Markup Language超文本标签语言
            css:Cascading Style Sheet 层叠样式表 作用:决定如何显示html元素。
        -->
        <!--
            常用的部分css样式:
            1.宽度width 单位:px
            2.高度height 单位:px
            3.背景颜色background-color 单位:颜色单词
            4.文字颜色color 单位:颜色单词
            5.文字大小font-size 单位:px
            6.行高line-height    单位:px
            7.文本对齐方式text-align 值:left/center/right
            8.首行缩进text-indent 单位:px
            9.12px支持最小字体,16px浏览器默认字体,区分是不是单词的标准有没有”空格“,
            10.center、left
        -->
        <!--书写css样式的三种方式
            1.行间css样式 直接在标签内通过style属性书写css样式。
            2.内联css样式 在head标签里面通过style标签书写css样式。
            3.外联css样式 单独创建一个css样式书写css样式。
            w3c对html的书写有这样的规范建议
            结构(html),样式(css),行为(js)三者尽可能做到相分离.
        -->
复制代码

引用外联样式是,link和@import的区别和使用方法

复制代码
<!--如何引用css文件
            1.@import方式引用,@开头全是css代码
            2.link标签引入,是html代码
            @import和link方式引用css文件的区别
            1.@import是css语法,link是html语法
            2.@import只能引用css类型文件,link可以引用其他类型文件
            3.@import 必须等到html文档加载完成后才开始加载,link会在文档加载的同时加载引用文件
            4.@import引用的代码后期无法修改,link引入代码后期可通过js修改
        -->
        <link rel="stylesheet" type="text/css" href="style/s1.css"/>
        <!--<style type="text/css">
            @import url("style/s1.css");
        </style>-->
复制代码

head中mate标签的作用

<!--meta标签单标签配置网站的原信息
            当前meta标签的作用设置当前文件的字符集(语言类型)
            将来我们还会通过meta标签做奇特配置
            如:1.兼容ie浏览器
            2.设置seo优化数据
            3.适配移动端
        -->

行元素、块元素特点和区别

复制代码
 1 <!-- html里面所有标签根据自身特点可以分为两种
 2 1.行元素
 3     1.1能在一行显示
 4     1.2不支持设置宽高,其大小有内容撑出
 5     1.3不支持垂直方向上的margin和padding
 6 2.块元素
 7     2.1独占一行
 8     2.2支持设置宽高,如果不设置,默认宽度和父元素一样
 9     2.3支持垂直方向上的margin和padding
10 行元素:img,a,strong,em,span
11 块元素:h1-h6,p,hr,ul,ol,li,div,form,pre
12 br,img替换元素-->
复制代码

快捷键语法详情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--
    emmet语法
    1.写标签,标签名+tab键
    2.标签名1+标签名2+标签名3+......+tab键,所有标签一次生成,之间互为兄弟标签
    3.标签名1>标签名2>标签3>...+tab键,所有代码一次生成。之间互为父子标签
    4.标签名*n+tab键,一次书写多个同名标签。
    5.$配合*使用,$会从1自增。
    6.{}里面可以书写标签的文本内容
    7.[]里面可书写标签的属性
    8.()表示一个整体-->
//案例
div+p+span
div>p>span
 div>p+span
ul>li*5 h$*6 div{这是div$元素}*10
 a[href=###]{超链接$}*5
ul>(li>a[href=###]{超链接$})*5

  常用选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*1.通配符选择器 能找到当前文档里的所有标签*/
             
            /*2.元素选择器 能找到当前文档中所有的同类型的某中标签
             语法
             标签名{
                 
             }*/
            /*3.id选择器能找到当前文档里设置了对应id值的某个元素
             注意:id值要具有唯一性
             语法:
             #id值{
                 
             }
             需要事先对要找到的元素设置id值*/
            /*
             4.class选择器 能找到文档中若干个任意类型的标签
             语法:
             .class值{}
             需要事先对要找到的元素设置class值*/
            /*
             5.子选择器 找到当前文档里与选择器1成父子关系的选择器2表示的元素
             注意:这种父子关系可以不断向后延伸
             语法:
             选择器1>选择器2>...{
                 
             }*/
            /*
             6.后代选择器
             语法:标志空格
             选择器1 选择器2{
                 
             }*/
            /*
            7. 相邻兄弟选择器,相邻、且在其下面.找到当前文档里与选择器1表示的元素相邻且在其下面的选择器2表示的元素。
            选择器1+选择器2+...{
                 
            }
            */
            /*
             命名规则:
             1.只能有数字、字母、下划线组成
             2.数字不开头
             3.见名之意
             需要多个单词时
             1.helloWorld驼峰命名法
             2.HelloWorld帕斯命名法
             3.iHelloWorld匈牙利命名法*/

  

posted @   前端乔  阅读(45)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示