CSS基本样式与元素选择器

最新推荐文章于 2024-09-11 20:31:47 发布

qq_46230474

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量159

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_46230474/article/details/104267596

版权

					CSS基本样式与元素选择器的使用
				所有html文件夹都要有 css images JS
	css的引用方式

行内样式：<div style="color:red;">天青色等烟雨，而我在等你</div>
color：可以设置文本颜色
2内部样式表：在头部添加style标签的方式（在练习时使用）
只能在当前页面使用
3外部样式表(找到自己的项目文件夹？再在外面创建一个css样式)：在头部通过link标签引入
列：
标签选择器：class可以重复使用，谁都可以使用，可以取任意次
列：

<span class="red  font30">G</span>
        		<span  class="blue">O</span>
       			 <span class="yellow">O </span>

Id 命名只能是唯一的一旦被使用了，其他人就不能使用
列

：<p id="bnm">111</p>
       			 	<p id="bnm">111</p>

class命名的元素使用点**.** ＋元素名称
ID命名的元素使用 “晒福”# ＋元素名称

外部样式

在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。
rel是relationship的缩写（指定当前文档与被链接文档的关系）rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件）
在这里插入图片描述

   css基本样式：
   	   /*通配符，不建议在项目中使用，加重浏览器解析负担 不利于页面优化 */
    *{
        margin: 0;
    }
    /* 项目代码的规范写法 */
    /* p,div ,span ,ul,li{ 
            margin: 0;
    }*/

    .box1{
    /* 尺寸样式 */
    /* 宽 */
          width: 300px;
        /* 高 */
        height: 300px;

        /* 位置样式 */
        /* 水平位置 */
        /* margin-left: 500px; */
        /* margin-right: 509px; */
        /* 垂直位置 */
        /* margin-top: 300px; */
        /* margin-bottom: 300px; */

        /* 复合写法 */
        /* 上右下左 */
        margin:30px 40px 50px 60px ;
        /* 两个值 上下 左右 */
        margin: 100px 300px;
        /* 一个值 */
        margin: 200px;
        /* 水平居中 */
        margin: 100px auto 0px;
        /* 清楚默认边距 */
        margin: 0;
        padding: 0;

        /* 三装饰样式 */
        /* 字体颜色 */
        color: red;
        /* 背景颜色 */
        /* 颜色值三种写法
                1 颜色值
                2 16进制
                3 rgb（0.255 0-255  0-255）
                     rgba （0.255 0-255  0-255） */
        /* background-color: cyan; */
        /* background-color: rgb(red, green, blue); */
        background-color: rgba(red, green, blue, alpha);

        /* 文字样式 */
        /* 字体颜色 */
        color: salmon;
        /* 字体大小 */
        font-size: 30px;
          /* 字体 */
        font-family:Arial, Helvetica, sans-serif ;
        /* 文字居中 */
        text-align: center;

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special

				<style>
					div.dd{
						color:pink
					}
                    </style>
				</head>
				<body>
					<div class="dd">交集选择器</div>
					<div>交集选择器</div>
			</body>

并集选择器（css选择器分组）是各个选择器通过逗号连接而成的任何形式的选择器（包括标签选择器、class类选择器ID选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式

							<style>
							.aa{
							color:pink
							background-color:red;
							}
							.bb{
							color:yellow
							background-color:blue;
							}
							.cc{
							color:green
							background-color:lightblue;
							}
							.aa,
							.bb.
							.cc{
							font-size:50px;
							font-weight:800:
							}
							
							</style>
							<body>
								<div>
								<p class="aa">01</p>
								<p>02</p>
								</div>
									<div>
								<p class="bb">01</p>
								<p>02</p>
								</div>
									<div>
								<p class="cc">01</p>
								<p>02</p>
								</div>
							</body>

后代元素选择器是一个空格空格前后各有一个选择器

作用：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素

					<style>
                    	.ddd ul{
                    		background-color:red;
                    	}
                    </style>
					body>
					<div class="ddd">
					<p>
						<ul>
						<li>222</li>
						<li>333</li>
						</ul>
					</p>
					</div>
					<div class="bbb">
					<p>
						<ul>
						<li>222</li>
						<li>333</li>
						</ul>
					</p>
					
					</body>

子代元素选择器是一个大于号> 作用是：找到大于号的选择器所选中的元素的子元素中大于号选择器的要求的元素

					<style>
					.aa>p>a{
					background-color:red;
					}
					</style>
					<body>
						<div class="aa">
							<p>
							<a href="#">百度</a>
							</p>
							<a href="#">京东</a>
						</div>
					</body>

相邻元素选择器：用一个加号+

列：

.main>ul+div{

background-color:red } >

兄弟元素选择器：用**~波浪号**

列：

.main>ul~div{

background-color:red } >