CSS教程

选择器补充与CSS修改属性

本文主要是介绍选择器补充与CSS修改属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

伪元素选择器

    """通过css操作文本内容"""
    1.修改首个字体样式
    	p:first-letter {
                color: red;
                font-size: 48px;
            }
    2.在文本开头添加内容
    	p:before {
                content: '哈哈';
                color: blue;
            }
    3.在文本结尾添加内容
    	p:after {
                content: '嘿嘿';
                color: yellow;
            }
    使用场景
    	1.用于后面清除浮动带来的负面影响
      2.用于网站的内容防爬

选择器优先级

1.相同选择器
	'就近原则':谁离标签越近就听谁的!!!
2.不同选择器 
	行内选择器 > id选择器 > 类选择器 > 标签选择器

CSS选择器是所有选择器的基础
	后期框架提供的、后期爬虫模块提供的
所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少

CSS字体样式修改

# 文字字体
  font-family: "Microsoft Yahei"
# 字体大小
	font-size: 24px
# 字体粗细
	font-weight: lighter\bolder
# 字体颜色
	方式1: 
    	color: red;
  方式2:
    	color: rgb(128, 128, 128);
  方式3:
    	color: #4f4f4f;
"""
获取颜色的方式有很多
	1.截图软件自带取色功能
		微信、qq自带颜色编号 #4f4f4f
	2.pycharm提供的取色器
		左侧颜色块点击即可 
"""

文字属性的修改

    # 文字对齐
    	text-align:center/left/right
    # 文字装饰(重点)
    	"""a标签默认带下划线  并且有颜色(没有点击过是蓝色 点击过是紫色)"""
      text-decoration: none;  主要就是用于去除a标签的下划线
    	text-decoration: line-through;  删除线
      text-decoration: overline;			上边线
      text-decoration: underline;			下划线
    # 首行缩进
    	text-indent: 32px;  # 首行缩进32px
     
    """
    补充:可以使用浏览器做样式的动态调整
    	查找到标签的css 然后左键选中 通过方向键上下动态修改数值
    """

背景属性

# 1.背景颜色
	 background-color: red;
# 2.背景图片
	 background-image:url("111.png");
   """背景图片如果没有设置的区域大 那么默认自动填充满"""
   background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
   background-position:left top;  图片位置
    
   background-attachment: fixed;  背景附着


如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
	background:#336699 url('1.png') no-repeat left top;

边框

    # 1.自定义调整每个边的边框
      border-left/top/right/bottom-color: black;
      border-left/top/right/bottom-width: 5px;
      border-left/top/right/bottom-style: solid;
    # 2.统一调整每个边的边框
      border: 5px solid black;  顺序无所谓 只要给了三个就行
     
      dotted	点状虚线边框
      dashed	矩形虚线边框
      solid		实线边框
     
    # 3.画圆
    	border-radius: 50%
      如果长宽一样那么就是圆 不一样就是椭圆

display属性

    只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)

    display:inline  让标签具备行内标签的特性(不能设置长宽)
    display:block   让标签具备块儿级标签的特性(可以设置长宽)
    display:inline-block  使元素同时具有行内元素和块级元素的特点
    display:none    隐藏标签(重点)  页面上不会保留位置也不显示
      	visibility:hidde  也是隐藏标签 但是位置会保留

盒子模型

学习盒子模型可以将标签看成是一个个快递盒
快递盒组成部分											盒子模型
	内部物品											content(内容)
	内部物品与盒子内部的距离				 padding(内边距、内填充)
	盒子的厚度											border\边框
	盒子与盒子之间的距离						 margin(外边距)
	
ps:两个标签之间的距离 有时候可以用margin也可以用padding

    # 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
    	          margin-left: 0;
                margin-top: 0;
                margin-right: 0;
                margin-bottom: 0;
    margin: 1px 2px 3px 4px	  上 右 下 左
    margin: 1px 2px 3px				上 左右  下
    margin: 1px 1px						上下	左右
    margin: 1px								统一设置一个值
      
    # 2.padding用法与margin一致
    	同上

    盒子模型页面布局
    	标签的水平居中 可以使用固定搭配
      	margin: 0 auto;

浮动

      # 1.浮动的作用
        float: left/right;
        """
        浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
        是多个块儿级标签可以在一行显示(全部飘在了空中)
        """

      # 2.浮动的影响
      	浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)

       
      补充说明:
        浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
        那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来

浮动影响的解决

      clear: left;   规定元素的哪一侧不允许其他浮动元素
      推导流程
      	1.直接写div然后写对应的长宽
        2.写div然后添加clear属性 避免去查找长宽
        3.万能公式(固定搭配 记住就可以)
        	.clearfix:after {
                  content: '';
                  clear: both;
                  display: block;
              }
       """
       以后写网页 提前写好上面的代码 
       然后哪个标签塌陷了就给谁添加上clearfix类名即可
       
       很多前端页面框架使用的也是clearfix类名
       """

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0
        }
        #d3 {
            width: 100%;
            height: 500px;
            background: url("https://img1.baidu.com/it/u=2364599438,612325272&fm=253&fmt=auto&app=138&f=JPEG?w=451&h=920") center center;
            background-attachment: fixed;
        }
        p[id='d1'] {
            margin: 5px;
            /*修改字体大小*/
            font-size: 38px;
            /*修改字体粗细*/
            font-weight: bold;
            /*修改背景颜色*/
            /*background: hotpink;*/
            /*修改字体*/
            font-family: 楷体;
            /*调整缩进量*/
            text-indent: 114px;
            /*添加边框*/
            /*border-top\right\bottom\left--上\右\下\左*/
            /*border-color: green 颜色;*/
            /*border-width: 5px 宽度;*/
            /*border-bottom-style: dashed;  虚线*/
            /*border-bottom-style: dotted;  点状*/
            /*border-bottom-style: solid;   实线*/
            /*border-bottom-style: double;  双实线*/
            /*总体统一调整*/
            border: deepskyblue 5px solid;
            /*添加背景图片*/
            /*background-image: url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17");*/
            /*背景图片是否填充*/
            /*background-repeat: repeat;  */
            /*background-repeat: no-repeat;  不填充*/
            /*background-repeat: repeat-x;  横向填充*/
            /*background-repeat: repeat-y;  纵向填充*/
            /*调整背景图片位置*/
            /*background-position: center center;*/
            /*统一调整*/
            background: hotpink url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17") repeat center center;
        }        /*修改第一个文字*/
        p[id='d1']:first-letter {
            background: beige;
            color: purple;
            font-size: 38px;
            font-weight: lighter;
        }

        /*文本前面加信息*/
        h1:before {
            content: '问';
            color: mediumspringgreen;
            /*margin: 22px 33px 44px 55px; 上、右、下、左*/
            /*margin: 22px 33px 44px; 上、左右、下*/
            /*margin: 22px 33px; 上下、左右*/
            /*margin: 22px; 上下左右统一*/
        }

        /*文本后面加信息*/
        h1:after {
            content: '啊';
            color: gold;
        }

        body {
            /*修改文字对齐方式左\中\右--left\center\right*/
            text-align: center;
            /*文字装饰:删除线\下划线\上边线--line-through\underline\overline*/
            text-decoration: greenyellow underline;
            /*background: pink url("https://img.ivsky.com/img/tupian/t/201707/30/xingganyoumeilidemeinvtupian-005.jpg") center center;*/

            /*background-repeat: repeat;*/
            /*background-position: center center;*/
            /*float: left;*/
        }
        .c2 {
            /*display: inline;          让块儿级标签具有行级标签的特性(不能自定义长宽)*/
            /*display: block;           让行级标签具有块儿级标签的特性(能自定义长宽)*/
            /*display: inline-block;    让标签具有块儿级标签和行级标签的特性*/
            /*display: none;            隐藏标签*/
            /*visibility:hidde          隐藏标签 但是位置会保留*/
            width: 200px;
            height: 200px;
            /*画圆*/
            border-radius: 50%;
            background: deepskyblue;
            background-image: url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17");
            background-repeat: no-repeat;
            background-position: center center;
            /*标签水平居中*/
            margin: 0 auto;
        }
        h1 {
            display: block;
            width: 100%;
            height: 100px;
        }
        .c1 {
            margin: 12px;
        }
        .c4 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: red;
            border: green 5px solid;
            margin-right: 2px;
        }
        div[class='c4'] {
            margin: 5px 11px;
            background: deepskyblue url("https://img2.baidu.com/it/u=1453015798,3922096350&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=385") center center;
        }
        #id1 {
            /*width: 700px;*/
            /*height: 220px;*/
            border: mediumspringgreen 20px solid;
            background: pink url("https://img0.baidu.com/it/u=1393217030,2306235902&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413") center center repeat;
        }
        #d5 {
            clear: right;
        }
        .clearfix {
            content: '';
            clear: both;
            display: block;
        }
        div[class='c7'] {
            clear: both;
        }
    </style>
</head>
<body>
<p id="d1">谁能凭爱意将富士山拥有</p>
<div>
    <h1 class="c1">谁能凭爱意将富士山拥有</h1>
    <div class="c1" id="d3"></div>
    <h2 class="c1">谁能凭爱意将富士山拥有</h2>
    <h3 class="c1">谁能凭爱意将富士山拥有</h3>
    <h4 class="c1">谁能凭爱意将富士山拥有</h4>
    <h5 class="c1">谁能凭爱意将富士山拥有</h5>
    <h6 class="c1">谁能凭爱意将富士山拥有</h6>
</div>

<div class="c2">
    谁能凭爱意将富士山拥有
</div>
<div  class="c6 clearfix" id="id2">
    <div class="c4" id="d2" title="美女"></div>
    <div class="c4" id="d4"></div>
    <div class="c4" id="d5"></div>
</div>
<div class="c7">
    <a href="https://www.baidu.com/" class="'c5">百度</a>
    <a href="#" class="'c5">啥都没有</a>
</div>
</body>
</html>
这篇关于选择器补充与CSS修改属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!