0
点赞
收藏
分享

微信扫一扫

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式

文风起武 2022-12-31 阅读 99
csscss3html选择器系统/运维


<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
  </head>
  <style>
    span{
      color: red;
      background-color: yellow;
    }
  </style>
  <body>
  怎样在html中添加css：
  1.行内样式，内嵌样式
    <div style="color: red;background-color: yellow;">
      颜色 背景颜色
    </div>
  2.方式2，内联式，style标签 
  <span>aa</span>
  <span>bb</span>
  3.链接式，导入外部的样式表文件
  </body>
</html>

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_css

元素选择器

/* 通配符选择器 */
*{
  margin: 0;
  padding: 0;
}

/* 标签选择器 */
div,ul{
  margin: 0;
  padding: 0;
}

/* ID选择器 */
#d1{
  color: red;
}

/* 类别选择器 */
.newscolor{
  color: green;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index2.css"/>
  </head>
  <body>
    <div class="newscolor">a</div>
    <ul class="newscolor">b</ul>
    <div id="d1">c</div>
    <span class="newscolor">d</span>
  </body>
</html>

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_选择器_02

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_css_03

关系选择器

/* 包含关系 */
ul a{
  color: red;
}
/* 父子关系 */
li>a{
  color: green;
}
/* 相邻关系 ul下面的第一个a标签 */
.list + a{
  color: blue;
}
/* 兄弟关系,ul后面的所有a标签 */
ul ～ a{
  color: yellow;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index4.css"/>
  </head>
  <body>
    <ul class="list">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
    </ul>
    <a href="">3</a>
  </body>
</html>

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_css_04

属性选择器

/* 属性选择器 */
input[name='uname']
{
  color: red;
}
/* u开头 */
input[name^='u']
{
  color: red;
}
/* u结尾 */
input[name$='u']
{
  color: red;
}
/* 带u就行 */
input[name*='u']
{
  color: red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index5.css"/>
  </head>
  <body>
    <input type="text" name="uname"/>
  </body>
</html>

伪类选择器

（1）静态伪类，只能用于超链接的样式，例如：

:link 超链接点击之前
:visited 链接被访问过之后

（2）动态伪类

:hover “悬停”，鼠标放到标签上的时候
:active “激活”，鼠标点击标签，但是不松手时
:focus 是某个标签获得焦点时的样式

/* 访问前 */
a:link{
  color: red;
}
/* 访问后 */
a:visited{
  color: green;
}
/* 鼠标经过 */
a:hover{
  color: blue;
}
/* 鼠标按下但不松手 */
a:active{
  color: yellow;
}
/* 先爱后恨原则 l v h a 必须按这个顺序 */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index6.css"/>
  </head>
  <body>
    <a href="http://www.taobao.com">淘宝</a>
  </body>
</html>

a{
  color: black;
}
a:hover{
  color: green;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index6 copy.css"/>
  </head>
  <body>
    <a href="http://www.taobao.com">淘宝</a>
  </body>
</html>

/* 获得焦点 */
.uname:focus{
  color: red;
}
/* 鼠标经过 */
.product:hover{
  color: red;
  border:1px solid red;
}
/* 激活状态，鼠标点击不松手 */
.span1:active{
  color:red;
  background-color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index8.css"/>
  </head>
  <body>
    <input type="text" class="uname"/>
    <div class="product">
      aaa
    </div>
    <span class="span1">aa</span>
  </body>
</html>

颜色设置

.div1{
  color: red;
}

.div2{
  color: #FF4300;
}

.div3{
  color: rgb(119, 186, 231);
}
.div4{
  color: rgb(119, 186, 231,0.5);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index9.css"/>
  </head>
  <body>
    <div class="div1">
      1111111111111
    </div>
    <div class="div2">
      222222222222
    </div>
    <div class="div3">
      333333333333333
    </div>
    <div class="div4">
      4444444444444444
    </div>
  </body>
</html>

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_css3_05

行高字体大小

body{
  font-size: 12px;
  font-family: "黑体";
  font-weight: bold;
  color: blue;
  font-style: italic; 
  line-height: 25px;
}
/* 如果对通一个html元素做样式，则采用就近原则 */
.ul1{
  font: 14px/35px "宋体",Arial,"微软雅黑";
}
/* 行高是字体高度的1.5倍 */
.ul1{
  font: 14px/1.5 "宋体",Arial,"微软雅黑"; 
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index10.css"/>
  </head>
  <body>
    <!-- 浏览器的默认字体大小是16px ，实际开发中常用12px和14px-->
    <ul>
      <li>是点击阿克苏河的空间</li>
      <li>是点击可回收的空间和</li>
      <li>好吃巨好看巨好看</li>
    </ul>
    
    <ul class="ul1">
      <li>是点击阿克苏河的空间</li>
      <li>是点击可回收的空间和</li>
      <li>好吃巨好看巨好看</li>
    </ul>
  </body>
</html>

常用的文本样式

a{
  text-decoration: none;
  /* 去掉a标签下划线 */
}
a:hover{
  text-decoration: underline;
  /* 鼠标经过显示下划线 */
}
.price{
  text-decoration: line-through;
  /* 删除线 */
}
.info p{
  text-indent: 30px;
  /* 首行缩进 */
}
.list li{
  width: 50px;
  border: 1px solid red;
  white-space: nowrap; /*强制不换行*/
  overflow: hidden/*溢出的部分隐藏*/;
  text-overflow: ellipsis;/*超出的部分显示省略号*/
}
.center{
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index11.css"/>
  </head>
  <body>
    <ul>
      <li>
        <a href="">1111111111111111</a>
      </li>
    </ul>
    <span class="price">999</span>
    <div class="info">
      <p>11111111111111111111111111111111111111111111</p>
    </div>
    <ul class="list">
      <li>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊
      </li>
    </ul>
    <div class="center"> 
      居中
    </div>
  </body>
</html>

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_css_06

常用列表样式

*{
   margin: 0;
   padding: 0;
}
.list1{
   list-style: none;
}
.list2{
   /* 这种方式如果设置margin=0，会导致图片不显示 */
   /* list-style-image: url(../img/4.webp); */
   border: 1px solid red;
}
.list2 li{
   border: 1px solid red;
   /* background-image: url(../img/4.webp);
   background-repeat: no-repeat;
   background-position: left center; */
   /* 如果所有的图片都一样，采用这种方式 */
   background: url(../img/4.webp) no-repeat left center;
   padding-left: 80px;
}
/* 行内标签，a、span等设置宽度高度没用，需要先转为块标签
   块标签，li、p、div独占一行
 */
.list3 span{
   display: inline-block;/*转换为行内块标签 */
   height: 14px;
   width: 24px;
   background: url(../img/5.png) no-repeat;
}
span.span1{
   background-position: 0 0;  
}
span.span2{
   background-position: 0 -50px; 
}
span.span3{
   background-position: 0 -100px;   
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index12.css">
  </head>
  <body>
    <ul class="list1">
      <li>11111111</li>
      <li>22222222222</li>
      <li>3333333333</li>
    </ul>
    <ul class="list2">
      <li>11111111</li>
      <li>22222222222</li>
      <li>3333333333</li>
    </ul>
    <ul class="list3">
      
      <li><span class="span1"></span>11111111111111</li>
      <li><span class="span2"></span>22222222222</li>
      <li><span class="span3"></span>3333333333</li>
    </ul>
  </body>
</html>

css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_html_07


css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式_css_08


举报

相关推荐

CSS之关系选择器、属性选择器、伪类选择器

csshtmlcss3

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

csshtml复合选择器子元素选择器交集选择器HarmonyOS后端开发

CSS基本选择器（元素选择器、类选择器、id选择器）

csscss3html

CSS-选择器,id 选择器、元素标签选择器、类选择器、多类选择器、属性选择器

cssCSS-选择器选择器html属性选择器Html/CSS前端开发

CSS样式应用的基石：元素选择器、类选择器与ID选择器

c语言开发语言mcu算法单片机c++gd32

css样式、选择器

css前端sass

css 类选择器 id选择器 html选择器 通配符选择器 父子选择器

选择器csshtmlHarmonyOS后端开发

CSS|属性选择器

csshtmla标签背景颜色Linux系统/运维

【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

csshtml前端复合选择器后代选择器Python后端开发

css关系选择器

选择器cssJavaScript前端开发yyds干货盘点
0 条评论