css部分（1）

最新推荐文章于 2022-03-13 08:30:00 发布

weixin_44318477

最新推荐文章于 2022-03-13 08:30:00 发布

阅读量96

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_44318477/article/details/106106004

版权

javaweb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.css简单介绍

css（Cascading Style Sheet，）：层叠样式表或级联样式表，主要用来渲染，装扮，美化页面。

2.css的三种写法

（1）行内样式：又称标签样式，主要是写在标签的style属性上，将css写在标签上，简单方便，优先级别最高，做微调，但是此样式只对当前标签有效，不推荐使用

<div style="color:green">这是一个行内标签</div>

（2）内嵌式：又叫页面样式，即在 head 间，通过使用 HTML 标签中的 style标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端，

<head>
     <style>
         div{
              color:red;
         }
     </style>
</head>
<body>
     <div>这是一个div1</div>
     <div>这是一个div2</div>
     <div>这是一个div3</div>
</body>

（3）外链式：首先在页面外部创建一个css文档（xxx.css）,用link标签(link标签写在head里面)引入，rel（rel="stylesheet"）表示类型，不能省略，href表示css的位置

eg:<link rel="stylesheet" href="css02.css"/>

3.css的选择器

基本语法：

选择器{

属性：属性值；

.... ........

}

(1)基本选择器

基本选择器是使用概率高，也是常被使用的选择器，必须要掌握它。基本选择器包括如下选择器：

1. 标签选择器（根据标签名称获取）

2. ID选择器（获取id为xx的标签）

3. 类选择器（获取标签中class=xxx的标签）

4. 通用选择器（通配符）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		
		<!-- <link rel="stylesheet" href="./css/reset.css"> -->
		<style type="text/css">
			/* 通配符选择器 * 现在不推荐使用 */
			/* * {
				margin: 0px;
				padding: 0;
				font-size: 16px;
			} */
			
			/* id选择器  #id名称 */
			#msg {
				color: green;
				font-size: 30px;
			}
			/* class选择器， .className  */
			.box {
				width: 300px;
				height: 200px;
				border: 1px solid red;
			}
			/* 标签选择器 */
			a {
				text-decoration: none;
				color: gray;
				font-size: 18px;
			}
			/* 逗号选择器 */
			ul, ol {
				list-style: none;
			}
			/* div中使用box类的 */
			div.box {
			}
			.msg {
				background: gray;
				width: 800px;
			}
			
			
		</style>
	</head>
	<body>
		<!-- id：标签的唯一标识符 -->
		<div id="msg">这个是个div</div>
		
		<!-- 类选择器 -->
		<div class="box"></div>
		<!-- 一个标签可以有多个类选择器 -->
		<div class="box msg"></div>
		<div class="box"></div>
		
		<ul class="li"><li><a href="#">导航1</a></li></ul>
		<ul class="li"><li><a href="#">导航1</a></li></ul>
		
	</body>
</html>

（2）包含选择器

1. 子代选择器(获取某个标签的第一级子标签)

2. 后代选择器（获取某个标签中的所有的子标签）

3. 分组选择符，也叫做逗号选择器（可以同时设定多个标签，使用逗号进行分割）

<!DOCTYPE html> 
<html>   
    <head>     
    <meta charset="UTF-8">     
    <title></title>     
    <style>         
   /* 子代选择器 */         
        div.list>ul {      
              border: 1px solid red;      
      }       
    /* 后代选择器 */           
       .list li {            
              border: 1px solid red;      
      }        
    /* 逗号选择器 */          
       .mylove, #myprogram, h1 {             
              color: #eee;            
              width: 200px;   
              height: 30px;  
              background: skyblue;    
        }                 
        </style>  
  </head>  
  <body>     
      <div id="first" class="mylove" >这个是一个div</div>   
      <p id="myprogram">这个是段落标签</p>     
      <div class="mylove mylove2">这个是一个div</div>   
      <h1>这个是标题</h1>   
      <hr />     
      <div class="list">  
            <ul>    
                 <li>这是是一个列表1</li>       
                 <li>这是是一个列表2</li> 
                 <li>这是是一个列表3</li>
                 <li>这是是一个列表4</li>
                 <li>这是是一个列表5</li>
                 <li>这是是一个列表6</li>
                 <li>这是是一个列表7</li>
                 <li>这是是一个列表8</li>
                 <li>这是是一个列表9</li>
                 <li>这是是一个列表10</li>
            </ul>
            <li>这是是一个列表8</li>
            <li>这是是一个列表9</li>
            <li>这是是一个列表10</li>

        </div>
    </body>
</html>

（3）属性选择器

<!DOCTYPE html>
<html>   
    <head> 
       <meta charset="UTF-8">
       <title>属性选择器</title>
       <style>
      /* 表示选中的标签中存在某个属性 */  
           .container[class] { 
               color: red;  
          } 
           div[title] { 
               color: #00FFFF; 
           } 
           /* 确切的等于*/
           input[type='text'] {
                background: red;
            } 
           /* 属性的值中包含某个值 */ 
           input[type*='e'] { 
                background: red;
            }   
            /* 以什么开始 */ 
           input[type^='e'] {
                background: red; 
           }               
           /* 以什么结尾 */
            input[type$='rl'] {
                background: red; 
           }              
          /* +表示下一个标签 */ 
           .msg + p{
                border: 1px solid red; 
           }                     
         /* 属性名称等于属性值 */ 
           [title="这个是标题"] {
                color: red;
            }
      </style>
</head>

（4）伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

伪类选择器主要针对<a>标签来说的，常见状态主要有以下五种：

:link 超链接点击之前

:visited 链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候

:active “激活”：鼠标点击标签，但是不松手时

:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

 /*让超链接点击之前是红色*/ 
a:link{  
  color:red;
 }
 /*让超链接点击之后是橙色*/
a:visited{
  color:orange;
 }
 /*鼠标悬停，放到标签上的时候*/
a:hover{
  color:green;
 }
 /*鼠标点击链接，但是不松手的时候*/ 
a:active{
    color:black;
 }

注意：，在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

常见的伪类选择器

选择器示例示例说明
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:last-child p:last-child 选择所有p元素的后一个子元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:root root 选择文档的根元素
:link a:link 选择所有未访问链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的元素
:before p:before 在每个p元素之前插入内容
:after p:after 在每个p元素之后插入内容

(5)伪元素选择器

:before 表示css2中的伪类选择器

:after 表示css2中的伪类选择器

::before 表示css3的伪类选择器

::after 标签css3的伪类选择器

p::before { 
    display: inline-block;   
    content: "s";
    width: 10px;
    height: 10px;
    background: red;
    border: 1px solid red;
    border-radius: 50%;
 }
p::after {
    content:" -- liu"; 
}

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:last-child	p:last-child	选择所有p元素的后一个子元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:root	root	选择文档的根元素
:link	a:link	选择所有未访问链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个p元素之前插入内容
:after	p:after	在每个p元素之后插入内容