前端学习之day02-CSS基础

最新推荐文章于 2024-10-02 17:48:55 发布

zeuskk

最新推荐文章于 2024-10-02 17:48:55 发布

阅读量124

点赞数

分类专栏：大前端文章标签： css 大前端 html5

本文链接：https://blog.csdn.net/god953/article/details/119222383

版权

大前端专栏收录该内容

48 篇文章 1 订阅

订阅专栏

上午笔记

Day02 css属性组成和作用：预习

1、css属性和属性值的定义
2、css文本属性  
            font-size
                9pt = 12px; 1em=16px 0.75em=12px=9pt
            font-weight
                bolder(更粗的)bold(加粗)normal(常规)/100-900 9个等级
            font-style
                italic/oblique/normal italic倾斜字体/oblique字体没有倾斜属性的倾斜文字
            text-align
            vertical-align
                top/bottom/middle/baseline
            line-height 
                normal/value
            text-decoration:
                none/underline/overline/line-though
            text-indent
                可以取负值、只对第一行起作用
            text-transform
                none/capitalize/uppercase/lowercase
            letter-spacing
                value 字母或汉字之间间距
            word-spacing
                value 单词词距
            font-variant
                normal常规字体/samll-caps小型大写字母字体
            layout-flow
                forizontal自左向右/vertical-ideographic自上而下
            font:bolder italic 12px/1.5em "宋体"
3、css列表属性
            list-style-type:disc/circle/square/none
            list-style-image:url()
            list-style-position:outline外边/inside里面 定义列表符号位置
            list-style去掉列表符号
4、css背景属性
            background-color:red
            background-image:url()
            background-repeat:no-repeat/repeat/repeat-x/repeat-y
            background-position:left/center/right/数值 top/center/bottom/数值
            background-attachement:fixed固定/scroll滚动
5、css边框属性
            border: 5px solid #ff0000;
            border-width
            border-color
            border-style:solid实/dashed虚/dotted点/double/none
            border-bottom/left/right/top
            border-left-color
6、css浮动属性
            float
            clear清除浮动none/left/right/both



====================================================================================================================================================================
css基础

css基本语法:
    选择器{
        属性: 属性值;
        属性: 属性值;
        属性: 属性值;
    }
    选择器:查找页面元素的一种方式方法
    {} 样式规则,规定了使用选择器查找的元素实现何种样式
        男生{
            发型: 3mm;
        }
    注意事项: 
        1\属性和属性值使用:链接
        2\每一组属性和属性值结束后需要带封号;
        3\如果你的属性和属性值是最后一组出线的,可以不用带封号
            属性:对元素的描述
            属性值:描述的取值

css样式表分类:
    1\行内样式表:
        含义: 将所有的css语法放置在标签里
        基本语法: <div style="属性:属性值;属性:属性值;"></div>
        弊端:
            结构(HTML)和样式(CSS)没有分开
            使用行内样式表只会对独立的一个标签进行修饰,代码重复率比较高,结构比较乱
    2\内部样式表
        含义: 将对应的css语法和结构分开,所有的css语法需要放在一个style标签里面,推荐放在头部里面
        基本语法
            : <head>
                  <style>
                      选择器{
                      属性:属性值;
                      }
                  </style>
               </head>
        弊端: 结构和样式还没有做到完全分离,你的css还在html中
              如果代码较多的话,上下滚屏比较麻烦
              容易产生头重脚的效果
    3\外部样式表
        含义: 
            所有的央视修饰都放在独立的以.css为后缀名的文件中
            需要使用link标签进行引入
        优点: 结构样式完全分离

    所有的样式表都对样式进行修饰的话,实现的是什么样式?
    ======>样式表的优先级
    !important>行内>内部>外部(前提是内部再外部的下面)

下午笔记

选择器：
    标签选择器：
        通过标签的名字去查找页面中的元素
        1、标签名字当作选择器
            基本语法p{样式规则}
            匹配范围太广泛
        2、类选择器
            通过给元素起class类名，然后css里面通过类名查找页面中的元素
            基本语法 HTML:<div class="box"></div>
                     CSS : .box{样式规则}
                     只要角对应的类名都能查找到并且进行修饰，不区分元素类型
            弊端    匹配范围有缩小，但是还比较广
        3、id选择器
            基本语法
                   HTML：<div id="bobo"></div>
                   CSS : #bobo{样式规则}
            注意，每一个元素都能带id号，但是id的取值不能一致
            ID具有唯一性
            优点：
                精确度比较高，
        问题：如果使用不同的选择器修饰同一个元素，实现那个效果。======>>>>权重，优先级
            跟代码书顺序无关和权重有关，id>类>标签

          ——————————————————————————————————————— 
         |            |             |            |
         |  选择器    |   符号      |    权重值  |
         |  通配符    |     *       |     0000   |
         |    id      |     #       |     0001   |
         |    类      |     .       |     0100   |
         | 行内样式   |             |     1000   |
         | !important |             |     10000  |
          ———————————————————————————————————————


        4、通配符选择器 能够查找到页面中所有的元素，只实现一个一个效果
            取消所有元素自带的内边距和外边距
            *{margin:0;padding:0;}

        问题 如何给元素起俩个类名，并且俩个类名都对元素进行修饰，实现的是哪一个效果
        语法<div class="box1 box2"></div>
        如果俩个类对同一个元素进行修饰的话，实现的效果是后者，与代码顺序有关系。写在后面的会执行

        8、群组选择器
            作用：能够将公共的样式提取出来一起设置，做到节约代码作用。

        9、关系选择器、层级选择器
            后代子代选择器
	            后代选择器 使用符号 空格
	            子代选择器 使用符号 >
	        关系选择器
	            匹配当前元素的后一个兄弟 +
	            匹配当前元素的后面所有兄弟 ~
	          注意：只向后匹配

	    10、伪类选择器: 原本元素没有对应的样式修改，我需要通过伪类选择器进行修改对应的样式
	        四个伪类选择器一般经常在a标签里面===
	        :link       ===================>>访问前
	        :visited    ===================>>访问后的样式
	        :hover      ===================>>鼠标悬停，悬浮，划过
	        :active     ===================>>鼠标点击时，点击瞬间，鼠标落点
	        单纯的四个伪类，里面的hover可以单独拎出来使用
	    11、属性选择器： 通过元素的属性（HTML，标签）查找页面的元素
	        基本语法：
	            [属性]                ======>查找页面中所有带有该属性的元素
	            [属性="属性值"]       =======>匹配也年终所有带该属性并且有属性值的元素
	            E[属性]               =======>匹配页面中某一类元素中带有该属性元素
	            E[属性="属性值"]      =======>匹配页面中某一类元素中带有该属性，并且属性值的元素
	        属性选择器经常使用在表单元素中
	    12： ：checked
	         选中状态伪类
	         修改单复选的默认样式


css基本语法
    选择器{
    属性：属性值
    属性：属性值
    }
选择器：页面元素的查找方法
    {}：样式规则：规定了选择器查找到的元素实现何种样式
    css里面核心的属性和属性值
    1、文本属性
    2、边框属性
    3、列表属性
    4、背景属性
    5、浮动属性
    6、盒子模型属性
    7、元素类型属性
    8、溢出属性
    9、定位属性


核心属性：
        css文本属性  
            font-size
                9pt = 12px; 1em=16px 0.75em=12px=9pt
            font-family
                浏览器默认为宋体，但是在谷歌浏览器里面默认字体是微软雅黑
            font-weight
                bolder(更粗的)bold(加粗)normal(常规)lighter（细体）/100-900 9个等级 100 细体 400 正常（取消加粗和标题标签的效果） 700加粗 900更粗
            font-style
                italic/oblique/normal italic倾斜字体/oblique字体没有倾斜属性的倾斜文字
            text-align
            vertical-align
                top/bottom/middle/baseline
            line-height 
                normal/value
            text-decoration:
                none/underline/overline/line-though
            text-indent
                可以取负值、只对第一行起作用
            text-transform
                none/capitalize/uppercase/lowercase
            letter-spacing
                value 字母或汉字之间间距
            word-spacing
                value 单词词距
            font-variant
                normal常规字体/samll-caps小型大写字母字体
            layout-flow
                forizontal自左向右/vertical-ideographic自上而下
            font:bolder italic 12px/1.5em "宋体"