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

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

目录

• CSS
• • 外部样式表
  • 内部样式表
  • 内联样式表
  • css文件之间的引用 @import
• 选择器权重
• • !important
• 选择器
• • 全局选择器
  • 子代选择器
  • 后代选择器
  • • inherit 继承父类
    • initial 与浏览器一致
    • unset 自然继承
  • 类型选择器
  • 类选择器
  • id选择器
  • 标签属性选择器
  • • 1.值完全等于
    • 2.值以什么开头
    • 3.值以什么结尾
    • 4.值包含什么
  • 伪类选择器
  • • hover 鼠标放上去的效果
    • 修改元素样式
    • • first-child 修改第一个元素的样式
      • last-child 修改最后一个元素的样式
      • nth-child 修改指定位置元素的样式
    • 伪元素
    • • first-line 修改第一行的样式
      • first-line 修改第一个字的样式
      • after 在元素之后放下什么
      • before 在元素之前放下什么
• 盒模型
• • 块级标签与内联元素盒模型的区别
  • 盒子的外边距（Margin）设置
  • 盒子的内边距（Padding）设置
  • 盒子的边框或厚度（Border）设置
  • 块级标签居中设置
  • 替代盒模型(IE盒模型)
• 标签显示模式 display
• 图片样式设置
• • 背景图片样式设置
  • • background-repeat，background-size
    • background-color 背景颜色
• CSS常用样式
• • 文字相关样式
  • • 文字状态：（font-style）
    • 设置文字的粗体值 （fontWeight）
    • 英文字母大小写设置 （text-transform）
    • 控制文本是否有上、下划线，删除线
    • • text-decoration
    • 阴影 （text-shadow，box-shadow）
    • 文本对齐方式 （text-align）
    • 行间距 （line-height）
    • 字间距，单词间距，段前间距
    • • letter-spacing，word-spacing，text-indent
    • font 将多个文本属性一次性设置
    • 单行隐藏效果：省略号
    • 多行隐藏效果：省略号
    • css单位
    • 滚动条设置
  • 列表相关样式
  • • 设置无序列表前方的小圆点样式
    • list-style-type （list-style-image）
  • 超链接相关样式（link，visited）
  • 鼠标对超链接互动相关样式（hover，active）
  • 元素的外围框
  • • outline
  • 导入外部字体样式
  • • @font-face
• 定位 position
• • 相对定位 relative
  • 绝对定位 absolute
  • 固定定位 fixed
  • 浮动布局
  • 弹性盒子布局
  • • 元素挤压效果 flex-shrink
    • 项目y轴排列方式

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='/'] {/* 值完全等于 */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>

鼠标放上去时