CSS笔记:元素选择器和元素的属性

2020-08-23  本文已影响0人  XAbo

本文转自和参考：
1.suoning
2.红元老师
3.W3School

一、CSS简介

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。属性和属性值用冒号隔开，以分号结尾。
CSS作用是给HTML文档增加样式，这就引出核心问题，如何定位某个HTML元素并绑定样式（选择器）？CSS又有哪些样式？如何使得绑定样式后的元素之间相处融洽，样式跟元素有什么关联性？

CSS的继承特性：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font Test</title>
    <style>
        .box1 {
              color: red;
              font-size: 60px;
        }
        .box2 {
            font-size: 0.5em;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
    <p>我是Font Test</p>
    </div>
</div>
</body>
</html>
继承box1的color属性 继承计算后的值

CSS的层叠特性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font Test</title>
    <style>
        .box1 {
              color: red;
              font-size: 60px;
        }
        .box2 {
            background-color: blueviolet;
        }
        .box3 {
            width: 300px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box1 box2 box3">
     <p>我是Font Test</p>
    </div>
</div>
</body>
</html>

HTML引入CSS的方式：

  1. 行内样式
<div style="..."></div>
  1. 嵌入样式
<head>
    <style type="text/css">
        .p{
           font-color:red;
          }
    </style>
</head>

3.外部引用

第一种方式： 
<head>
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

第二种方式：
<head>
    <link href="My.css" rel="stylesheet" type="text/css">
</head
实例.png

二、CSS选择器

基本选择器：

1.通用元素选择器
* 表示应用到所有的标签。

* {color: yellow}

2.标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）

div {color: yellow}

3.类选择器
匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）

.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

4.ID选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头）

#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>　

组合选择器：

1.多元素选择器
同时匹配h3,h4标签，之间用逗号分隔。

h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

2.后代元素选择器
匹配所有div标签里嵌套的P标签，之间用''分隔。

div p {color: yellow;}
 
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

3.子元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔;不包含间接子元素。

div > p {color: yellow;}
 
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>
/**下面也是可以的：**/
.div-c > div-cp {color: red;}

<div class="div-c">
    <p>Nick</p>
    <p class="div-cp">Nick</p>  
    <span class="div-cp">Nick</span >
</div>

4.毗邻元素选择器
匹配紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

div + p {color: yellow;} 
<div>Nick</div>
<p>Nick</p>

匹配所有紧随div标签之后的同级标签P，之间用~分隔（匹配多个）。

div ~ p {color: yellow;} 
<div>Nick</div>
<p>Nick</p>

5.交集选择器：同时满足两个选择器

div.one[title="test"]{color: yellow;}
<div class="one" title="test"> 1</div>
<div class="two">2 </div>
<p  class="one">3</p>

6.并集选择器：只要符合其中一个的都被选中。

div,.one,[title="test"]{color: yellow;}
<div class="one" title="test"> 1</div>
<div class="two">2 </div>
<p  class="one">3</p>

h1,h1,h3,h4,h5,h6 {color: yellow;}
<h1>1</h1>
<h2>2</h2>

属性选择器：

1.[title] & P[title]
设置所有具有title属性的标签元素；设置所有具有title属性的P标签元素。

[title]
    {
        color: yellow;
    }
 p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

2.[title=Nick]
设置所有title属性等于“Nick”的标签元素。

 [title="Nick"]
    {
        color: yellow;
    }
<p title="Nick">Nick</p>

3.[title~=Nick]
设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

 [title~="Nick"]
    {
        color: yellow;
    }
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>

4.[title|=Nick]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。例：lang属性："en"、"en-us"、"en-gb"等等

[title|="Nick"]
    {
        color: yellow;
    }
 
<p title="Nick-Jenny">Nick</p>

5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。

 [title^="Nick"]
    {
        color: yellow;
    }
<p title="NickJenny">Nick</p>

6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。

   [title$="Nick"]
    {
        color: yellow;
    }
<p title="JennyNick">Nick</p>

7.[title*=Nick]
设置属性值中包含指定值的每个元素

 [title*="Nick"]
    {
        color: yellow;
    }
 
<p title="SNickJenny">Nick</p>

伪类选择器：

  1. 动态伪类：:link、:hover、:active、:visited。hover必须放在link和visited之后才能生效hover和active可以用在其他标签上。 
 a:link{color: black}
 a:visited{color: red
 a:hover{color: yellow}
 a:active{color: blue}

<a href="#">Nick</a>
 strong:hover{color: yellow}
 strong:active{color: blue}
<strong>Nick</strong>
  1. 动态伪类:focus：获取焦点之后。tabindex属性可是使<a>去掉focus样式。
a,input :focus{color: yellow}
<input type="text">
<a href="#">Nick</a>
<a href="#" tabindex="-1">Nick</a>
  1. 结构伪类：nth-child(n):选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。偶数evne；奇数：odd；n的取值是自然数。
p:nth-child(2n){color:red} 
p:nth-child(even){color:red}
p:nth-child(-n+3){color:red}
<body>
 <div>
  <p>1</p>
  <p>2</p>
  <p>3</p> 
  <p>4</p> 
<div>
 <div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
<div>
<div>
  <strong>1</strong>
  <strong>2</strong>
<div>
<body>

4.结构伪类：nth-of-type(n):选择器匹配同类型中的第n个同级兄弟元素。

p:nth-of-type(3){color:red} 
<body>
 <div>
 <span>0</span>
  <p>1</p>
  <p>2</p>
  <p>3</p> 
  <p>4</p> 
<div>
<body>

5.其他伪类选择器：before、after
P:before 在每个<p>元素的内容之前插入内容;
P:after 在每个<p>元素的内容之后插入内容。

    p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }
<p> Nick </p>　　

三、常用属性：

  1. 字体属性：
    font-style: 用于规定斜体文本。
    font-weight: 设置文本的粗细。
    font-size: 设置字体的大小。
    font-family：字体名称。
    font：简写属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font Test</title>
    <style>
        div {
            background-color: gold;
             /*
            font-size: 30px;
            font-family: 新宋体;
            font-weight: bold;
            font-style: italic;
            line-height: 50px;
            font-variant: small-caps;
            */

            /*属性简写方式1：style variant weight size/line-height family */
            font: bold italic small-caps 30px/50px 新宋体;
            /*属性简写方式2:style variant weight 省略*/
            /*font: 30px/50px 新宋体;*/
            /*属性简写方式3：line-height 省略*/
            /*font: 30px 新宋体;*/

            /*属性错误方式 字体要在最后 */
            /*font:  新宋体 30px;*/

        }
    </style>
</head>
<body>
<div>
     我是Font Test
</div>
</body>
</html>
效果展示

2.文本属性
white-space: 设置元素中空白的处理方式。
direction: 规定文本的方向 。
text-align: 文本的水平对齐方式 。
line-height: 文本行高。
vertical-align: 文本所在行高的垂直对齐方式。
text-indent: 文本缩进。
letter-spacing: 添加字母之间的空白。
word-spacing: 添加每个单词之间的空白。
text-transform: 属性控制文本的大小写。
text-overflow: 文本溢出样式。
text-decoration: 文本的装饰。
text-shadow：文本阴影。
word-wrap：自动换行。

3.定位属性
bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移。

把图像的底边缘设置在其包含元素底边缘之上 5 像素高的位置：
img
  {
  position:absolute;
  bottom:5px;
  }

clear:规定元素的哪一侧不允许其他浮动元素。

图像的左侧和右侧均不允许出现浮动元素：
img
  {
  float:left;
  clear:both;
  }

clip:剪裁绝对定位元素。

剪裁图像：
img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

cursor:规定要显示的光标的类型（形状）。

一些不同的光标：
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

display规定元素应该生成的框的类型，正常值有：inline、inline-block、block；但是，但是，但是:list-item专门为li元素设置。其中inline-block比较特殊，可以是元素同时具备行内和块级元素的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>li Test</title>
</head>
<body>
<ol>
    <li>NO1</li>
    <li>NO2</li>
    <li>NO3</li>
    <li>NO4</li>
    <li>NO5</li>
</ol>
</div>
</body>
</html>
li自带的display属性 块级元素之所以是块级元素就是因为，浏览器默认给元素增加了display:block属性。

float:规定框是否应该浮动。

把图像向右浮动：
img
  {
  float:right;
  }

left:设置定位元素左外边距边界与其包含块左边界之间的偏移。

把图像的左边缘设置在其包含元素左边缘向右 100 像素的位置：
img
  {
  position:absolute;
  left:100px;
  }

overflow:规定当内容溢出元素框时发生的事情。

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

position: 规定元素的定位类型。

定位 h2 元素：
h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

right:设置定位元素右外边距边界与其包含块右边界之间的偏移。

把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置：
img
  {
  position:absolute;
  right:5px;
  }

top:设置定位元素的上外边距边界与其包含块上边界之间的偏移。

把图像的上边缘设置在其包含元素上边缘之下 5 像素高的位置：
img
  {
  position:absolute;
  top:5px;
  }

vertical-align:设置元素的垂直对齐方式。

垂直对齐一幅图像：
img
  {
  vertical-align:text-top;
  }

visibility:规定元素是否可见。

使 h2 元素不可见：
h2
  {
  visibility:hidden;
  }

z-index:设置元素的堆叠顺序。

设置图像的 z-index:
img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

4.背景属性
background:在一个声明中设置所有的背景属性。
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
background-color:设置元素的背景颜色。
background-image:设置元素的背景图像。
background-position:设置背景图像的开始位置。
background-repeat:设置是否及如何重复背景图像。
background-clip:规定背景的绘制区域。
background-origin规定背景图片的定位区域。
background-size:规定背景图片的尺寸。
5.边框属性
border:在一个声明中设置所有的边框属性。
border-bottom-style:设置下边框的样式。
border-color:设置四条边框的颜色。
border-left:在一个声明中设置所有的左边框属性。
border-style:设置四条边框的样式。
outline:在一个声明中设置所有的轮廓属性。
box-shadow:向方框添加一个或多个阴影。
6.box属性
overflow-x:如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-style:规定溢出元素的首选滚动方法。
rotation:围绕由 rotation-point 属性定义的点对元素进行旋转。
rotation-point:定义距离上左边框边缘的偏移点。
7.color属性
color-profile:允许使用源的颜色配置文件的默认以外的规范。
opacity:规定元素的不透明级别。
rendering-intent:允许使用颜色配置文件渲染意图的默认以外的规范。
8.CSS尺寸属性
height:设置元素高度,默认auto。对于非替换的行内元素无效！
width:设置元素的宽度。对于非替换的行内元素无效！
max-width:设置元素的最大宽度。


9.可伸缩框属性
box-ordinal-group:规定框的子元素的显示次序。
box-orient:规定框的子元素是否应水平或垂直排列。
box-align:规定如何对齐框的子元素。
10.外边距属性
margin:在一个声明中设置所有外边距属性。
margin-top:设置元素的上外边距。

11.内边距属性
padding:在一个声明中设置所有内边距属性。
padding-top:设置元素的上内边距。
12.列表属性
下面的这些属性是设置在ol、ul上的，会被继承在li上。
list-style-type:设置列表项标记的类型；none属性值使用的最多。
list-style-position:设置列表项标记的放置位置。
list-style-image:将图象设置为列表项标记。
list-style:在一个声明中设置所有的列表属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>li Test</title>
    <style>
      ul{
          list-style-type: none;
          padding: 0px;
          margin: 0px;
      }
      ul li{
          margin-top: 8px;
      }
      ul li span{
          background-color: gold;
          color: aliceblue;
          padding: 0px 5px;
          /*修改字体大小，作用在span上无效*/
          /*width: 300px;*/
          /*height: 300px;*/
      }
    </style>
</head>
<body>
<ul>
    <li><span>1</span>NO1</li>
    <li><span>2</span>NO2</li>
    <li><span>3</span>NO3</li>
    <li><span>4</span>NO4</li>
    <li><span>5</span>NO5</li>
</ul>
</div>
</body>
</html>
通过调节内外边距实现span分离效果
13.表格属性
border-collapse:规定是否合并表格边框。
border-spacing:规定相邻单元格边框之间的距离。
caption-side:规定表格标题的位置。
empty-cells:规定是否显示表格中的空单元格上的边框和背景。
table-layout:设置用于表格的布局算法。 Table实例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Test</title>
    <style>
     table{
           border: 1px solid red;
           /*合并单元格的边框*/
           border-collapse: collapse;
          /*table居中*/
           margin: 100px auto;

        }
     caption{
         color: gold;
         font-size: 20px;
         font-weight: bold;
         margin-bottom: 20px;
        }
        th,td{
            border: 1px solid red;
            padding: 15px;
            text-align: center;

        }
    </style>
</head>
<body>
    <table>
        <caption>我是谁</caption>
        <thead>
        <tr>
            <th>thead</th>
            <th>thead</th>
            <th>thead</th>
            <th>thead</th>
            <th>thead</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="2">tbody</td>
            <td>tbody</td>
            <td>tbody</td>
            <td rowspan="2">tbody</td>
        </tr>
        <tr>
            <td>tbody</td>
            <td>tbody</td>
            <td>tbody</td>
            <td>tbody</td>
        </tr>
        <tr>
            <td>tbody</td>
            <td>tbody</td>
            <td>tbody</td>
            <td>tbody</td>
            <td>tbody</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>tfoot</td>
            <td>tfoot</td>
            <td>tfoot</td>
            <td>tfoot</td>
            <td>tfoot</td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
</html>

四、补充内容：

上一篇 下一篇

猜你喜欢

热点阅读