5、CSS选择器

4、CSS语法:

格式:

选择器{

属性名1:属性值1;

属性名2:属性值2;

...

选择器:筛选具有相似特征的元素

注意:

每一对属性需要使用;隔开,最后一对属性可以不加;

5、选择器:筛选具有相似特征的元素

       分类:

      1.基础选择器:

           1.id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一

           语法:#id属性值{}

            2.元素选择器:选择具有相同标签名称的元素

            语法:标签名称{}

            注意:id选择器优先级高于元素选择器

           3.类选择器:选择具有相同class属性值的元素

            语法:.class属性值{}

            注意:类选择器优先级高于元素选择器

      2.扩展选择器:

            1.选择所有元素:

           语法:*{ }

           2.并集选挥器:

            选择器1,选择器2{}

           3.子选摔器:筛选选择器1元素下的选择器2元素

            语法:选择器1 选择器2{}

           4.父选择器:筛选选择器2的父元素选择器1

            语法:选择器1 >选择器2{}

            5.属性选择器:选择元素名称,属性名=属性值的元素

            语法: 元素名称[属性名=“属性值"]{}

           6.伪类选挥器:选择一些元素具有的状态

           语法:元素:状态{}

           ”如: <a>

           状态:

                 link :初始化的状态

                  visited :被访问过的状态

                 active:正在访问状态

            hover :鼠标旭浮状态

6、属性

      1.字体。文本

            font-size :字体大小

           color :文本颜色

           text-align: 对其方式

           line -height :行高

      2.背景

            background:

      3.边框

            border:设置边框,复合属性

      4.尺寸

            width:宽度

            height:高度

      5.盒子模型:控制布局

            margin:外边距

            padding :内边距

            默认情况下内边距会影响整个盒子的大小

            box-sizing:border -box;设置盒子的属性,让width和height就是最终盒子的大小

            float :浮动

                  left

                  right

发布了18 篇原创文章 · 获赞 0 · 访问量 160

猜你喜欢

转载自blog.csdn.net/weixin_42065524/article/details/104281597
今日推荐