• 【CSS】H4_基础

    文章目录

    第四章 初识CSS3

    css的概念：

    Cascading Style Sheet 级联样式表

    表现HTML或XHTML文件样式的计算机语言

    包括对字体、颜色、边距、高度、背景图片、网页定位等设定

    css的优势：
    • 内容与表现分离
    • 网页的表现统一，容易修改
    • 丰富的样式，使得网页布局更加灵活
    • 减少网页的代码量，增加网页的浏览速度，节省网络宽带
    • 运用独立于页面的css，有利于网页被搜索引擎收录
    css基本语法结构：

    语法：

     选择器{ 

		声明1；

		声明2；
	}
	最后一条声明后的“；”可写可不写。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    style标签：

    HTML中引入CSS样式：
    行内样式
    
<h1 style="color:red;">style属性的应用h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式p>

    • 1
    • 2
    • 3
    内部样式表
    
<style>
    h1{
        color:green;
    }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    优缺点：

    • 方便在同页面中修改样式
    • 不利于在多页面间共享复用代码以及维护，对内容与样式的分离也不够彻底
    外部样式表

    • CSS代码保存在扩展名为.css的样式表中

    • HTML文件引用扩展名为.css的样式表，有两种方式：链接式，导入式。

      链接外部样式表：
      语法：
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
           文件路径           使用外部样式表      文件类型

      • 1
      • 2
      • 3
      • 4
    ```
    导入外部样式表：
    语法：
<head>
    <style type="text/css">
    	@import url("style.css"); 
    style>
head>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    导入式与链接式的区别：
    • 标签属于XHTML，@import是属于CSS2.1
    • 使用链接的CSS文件先加载到网页当中，再进行编译显示
    • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
    • @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
    优先级：
    • 行内样式>内部样式表>外部样式表
    • 就近原则
    基本选择器：
    标签选择器

    HTML标签直接作为标签选择器的名称

    类选择器
    <style>
    .class{}
style>
    
<标签名 class="自定义名称">标签名>

    • 1
    • 2
    • 3
    • 4
    • 5
    ID选择器
    <style>
    #id{}
style>
    
<标签名 id="自定义名称">标签名>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 标签选择器直接应用于HTML标签
    • 类选择器可在页面中多次使用
    • ID选择器在同一个页面中只能使用一次
    • ID选择器>类选择器>标签选择器
    • 标签选择器 不遵循就近原则
    全局选择器
    *{

}
选择所有元素

    • 1
    • 2
    • 3
    • 4
    并集选择器
    <style>
    .borther,#aa,a{
        color: blueviolet;
        font-size:25px;
    }
style>
<body>
    <ul class="borther">
        <li id="aa"><a>大娃a>li>
        <li>二娃li>
        <li>三娃li>
    ul>
    <a>我是一个虚假连接a>
    <ul>
        <li>孙悟空li>
        <li>猪八戒li>
        <li>沙悟净li>
        <li>唐三藏li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    高级选择器：
    层次选择器：
    选择器类型功能描述
    EF后代选择器选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
    E>F子选择器选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
    E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
    E~F通用兄弟选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
    后代选择器
    body p{
	
}
实例
<style>
		ul li a{
			color: red;
		}
style>
<body>
    <ul>
        <li><a>大娃a>li>
        <li>二娃li>
        <li>三娃li>
    ul>
    <ul>
        <li>孙悟空li>
        <li>猪八戒li>
        <li>沙悟净li>
        <li>唐三藏li>
    ul>
body>
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    子选择器
    body>p{
}
<style>
    	ul>li{
			font-size: 30px;
		}
		li>a{
			font-size: 30px;
		}
style>
<body>
    <ul>
        <li><a>大娃a>li>
        <li>二娃li>
        <li>三娃li>
    ul>
    <ul>
        <li>孙悟空li>
        <li>猪八戒li>
        <li>沙悟净li>
        <li>唐三藏li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    相邻兄弟选择器
    .active+p{

}

    • 1
    • 2
    • 3

    【同级ul不会改变:】

    在这里插入图片描述

    通用兄弟选择器
    	<style>
		#aa~li{
			color: blue;
		}
		.borther~ul{
			font-size: 20px;
		}
		a~ul{
			color: red;
		}
	style>
	<body>
		<ul class="borther">
			<li id="aa"><a>大娃a>li>
			<li>二娃li>
		ul>
		<a>我是一个虚假连接a>
		<ul>
			<li>孙悟空li>
		ul>
		<ul>
			<li>1li>
			<li>2li>
		ul>
	body>


    • 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
    结构伪类选择器：
    选择器功能描述
    E:first-child作为父元素的第一个子元素的元素E，此标签必须在第一行
    E:last-child作为父元素的最后一个子元素的元素E
    E F:nth-child(n)选择父级元素E的第n个子元素F，(可以是1,2,3)，关键字为even、odd
    E:first-of-type选择父元素内具有指定类型的第一个E元素
    E:last-of-type选择父元素内具有指定类型的最后一个E元素
    E F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素
    使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

    • E F:nth-child(n)在父级里从一个元素开始查找，不分类型

    • E F:nth-of-type(n)在父级里先看类型，再看位置

    属性选择器：
    属性选择器功能描述
    E[attr]选择匹配具有属性attr的E元素
    E[attr=val]选择匹配具有属性attr的E元素，并且属性值为val**(val区分大小写)**
    E[attr^=val]选择匹配元素E，且E元素定义了属性attr,其属性值以val开头的任意字符串
    E[attr$=val]选择匹配元素E，且E元素定义了属性attr,其属性值以val结尾的任意字符串
    E[attr=val]*选择匹配元素E，且E元素定义了属性attr,其属性值包含了"val"（字符串val与属性值中的任意位置相匹配）
    示例：
<style>
    
		p[id]{
			background: yellow;
		}
    
     
		p[id=first]{
			background: red;
		}
    
     
		p[class*=links]{
			background: greenyellow;
		}
    
     
		p[href^=http]{
			background: blueviolet;
		}
    
    
		p[href$=png]{ 
			background: goldenrod; 
			}		
	style>
	<body>
		<p class="demo">
			<p class="links item" id="first">段落一p>
			<p href="http://xxx1" class="links item">段落二p>
			<p href="http://xxx2.png" class="links item">段落三p>
			<p class="links item">段落四p>
			<p class="links item">段落五p>
			<p class="links item" id="last">段落六p>			
		p>
	body>
		

    • 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
    div：块级元素
    span：行内元素
    	<body>
		<p class="demo">
			<p class="links item" id="first">段落一p>
			<p href="http://xxx1" class="links item">段落二p>
			<p href="http://xxx2.png" class="links item">段落三p>
			<p class="links item">段落四p>
			<p class="links item">段落五p>
			<p class="links item" id="last">段落六p>			
		p>
	body>
		

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    div：块级元素
    span：行内元素
    pre：输出格式在浏览器上不变，空格换行都能展现；兼容性不好
  • 相关阅读:
    Lwip的接收邮箱大小的影响
    从“一时红”到“持久火”，“网红”农产品如何越向“长红”？
    Scala入门到精通(尚硅谷学习笔记)章节四——输入和输出
    一、python基础语法
    搭建私有Git服务器：GitLab部署详解
    [蓝牙 Mesh & Zephyr]-[004]- 基础 Model
    MySQL基础篇-基本sql语句
    SystemVerilog验证——数据类型
    README.md文件使用
    从序号和确认号理解TCP三次握手
  • 原文地址：https://blog.csdn.net/m0_70083523/article/details/127766022