html CSS部分 (总算是全总结完了)

CSS

CSS(Cascading Style Sheets, 层叠样式表)，控制DOM元素的视觉外观。

同于设置和布置网页 设置字体，颜色，大小，间距甚至还可以用来排版

CSS样式由选择符和属性组成，选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性声明以分号结尾。 例如：

    <style>
    .box1 {
    
      color: tomato;
      font-size: 32px;
    }
    </style>

外部样式表

通过link引用，称为外部样式表

  <link rel="stylesheet" href="../css/style.css">

内部样式表

选择器 {
属性名；属性值;
属性名；属性值;
……
}
在相同规则的选择器下，遵循就近原则

  <style>
    .box1 {
    
      color: tomato;
      font-size: 32px;
    }

    .box1 {
    
      color: tomato;
      font-size: 24px;
    }
  </style>

内联样式表

通过元素上的style定义样式：内联样式

  <div style="color:tomato;font-size: 32px;">
    这里有很多很多的字
  </div>

css文件之间的引用 @import

使style具有style1的h1样式
style1.css ：

h1{
  color: darkcyan;
}

style.css ：

@import 'style1.css';
.box2 {
  color: #666;
  font-size: 32px;
}

选择器权重

不同的选择器，权重是不一样的

1.如果我的样式是声明在style这个标签里面，里面的任何选择器，都具备1000的权重

2.所有的id选择器，默认权重100

3.含有类选择，属性选择器，伪类选择器，权重是10

4.选择器中包含伪元素选择器，则为1分

    /* 类选择器 */
    .Class_h1 {
      color: bisque;
     /* 颜色是可以被继承的属性 */ 
    }

    /* 标签选择器 */
    h1 {
      color: yellow;
    }
	
	/* id选择器 */
    #Id_h2 {
      color: red;
    }

!important

强制让样式属性具备最高最高优先级，可以完全覆盖掉旧的规则

    .Class_h1 {
      color: bisque !important;
    }

选择器

全局选择器

整个body都会受到影响
写法： * 号加大括号

<style>
    * {
    
      margin: 0;
      padding: 0;
      /* 清空内外边距，使页面更加美观*/
    }
</style>

子代选择器

只会影响到第一层元素，不会影响之后的层级元素
通俗来讲就是：只会影响到儿子辈，不会影响孙子辈及之后

写法：大于号加点 + 子类元素名

<style>
	.div1>.son1 {
    
      border: 1px solid #18d39b;
    }
</style>

后代选择器

之后的层级元素都会继承样式

写法：空格加点 + 子类元素名

<style>
	.div1 .son1 {
    
      border: 1px solid red;
    }
</style>

inherit 继承父类

当前修改样式这个元素会必定继承父元素的样式

	.li1 a {
      color: inherit;
    }

initial 与浏览器一致

设置为和浏览器保持一致的样式

	.li2 a {
      color: initial;
    }

unset 自然继承

设置的自然继承,如果能够继承样式就继承,如果不能够就保持原有的样子

    .li3 a {
      color: unset;
    }

类型选择器

	h1 {
      /* 类型选择器 */
    }

类选择器

	.box1 {
      /* 类选择器 */
    }

id选择器

	#box1 {
      /* id选择器 */
    }

标签属性选择器

    a[title] {
      /* 标签属性选择器 */
      /* title为a标签的title属性 */
      font-size: 32px;
    }

1.值完全等于

	a[href='https://www.baidu.com/'] {
      /* 值完全等于 */
      color: salmon;
    }

2.值以什么开头

	a[href^='#'] {
      /* 以什么属性值开头的 */
      color: red;
    }

3.值以什么结尾

	a[href$='#'] {
      /* 以什么属性值结尾的 */
      color: red;
    }

4.值包含什么

	a[href*='#'] {
      /* 包含了属性值的 */
      color: red;
    }

伪类选择器

冒号后面追加固定关键词。

hover 鼠标放上去的效果

设置一个按钮

  <div class="btn">
    这是一个按钮
  </div>

按钮样式设置：

<style>
	.btn {
    
          width: 120px;
          height: 40px;
          line-height: 38px;
          text-align: center;
          background-color: black;
          color: yellow;
          border: 3px solid yellow;
          border-radius: 8px;
          cursor: pointer;
          /* width、height：div盒子的长和宽
		  	 line-height：字体实际在按钮内所占的高度
		  	 text-align：文字在按钮里的位置
		  	 background-color：按钮的背景颜色
		  	 color：按钮内字体的颜色
		  	 border：设置此按钮边框的线宽度以及颜色
		  	 border-radius：此按钮边框的角的弧度
		  	 cursor：设置当鼠标放在上面时，鼠标会变成手指（pointer）样式
          */
        }  
</style>

按钮本来的样子：

按钮的效果设置：鼠标放到按钮上时变换颜色

<style>
	.btn:hover {
    
      /* :hover 鼠标放上去的效果 */
      background-color: blue;
      color: white;
    }
</style>

鼠标放上去时的样子：

修改元素样式

创建示例需要的div：

	<div class="box1">
      <p>这是一个p标签</p>
      <p>这是一个p标签</p>
      <p>这是一个p标签</p>
      <p>这是一个p标签</p>
      <p>这是一个p标签</p>
      <p>这是一个p标签</p>
      <p>这是一个p标签</p>
    </div>

first-child 修改第一个元素的样式

<style>
	.box1 p:first-child {
    
	 /* 此处bold为字体加粗效果 */
      font-weight: bold;
    }
</style>

last-child 修改最后一个元素的样式

<style>
    .box1 p:last-child {
    
      font-weight: bold;
    }
</style>

nth-child 修改指定位置元素的样式

nth-child : 修改指定位置的元素 或指定倍数的元素