CSS3学习笔记

单一元素的多个属性之间用分号隔开;若只有一个可以省略。
多个元素之间用逗号隔开。

· 样式的优先顺序

  1. 设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式
  2. 行内(内联)样式
  3. 内部样式:style中的样式
  4. 外部样式

CSS3学习笔记
CSS3学习笔记
CSS3学习笔记
Ctrl+? 键 : 注释

如果值为若干单词,则要给值加引号;除了这种情况外其他时候不可以加引号。
层叠、继承、冲突外观样式–比如字体、颜色可以继承;而布局有关的样式不可以继承,比如边框等。
可以在同一个 HTML 文档内部引用多个外部样式表。

CSS3学习笔记
**

常用选择器

**
通用选择器:“*”
元素选择器
id选择器:前面有一个 # 号
类选择器:前面加符号 .
给一个元素加上多个类名
指定某一特定的类

CSS3学习笔记
CSS3学习笔记
CSS3学习笔记


属性选择器

E[att] :选择具有att属性的E元素。需要选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

E[att=“val”]:选择具有att属性且属性值等于val的E元素。进一步缩小选择范围,(只选择有特定属性值的元素。)

E[att~=“val”]:选择具有att属性且属性值有多个,其中一个的值等于val的E元素。

E[att|=“val”]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

E[att^=“val”]:选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$=“val”]:选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*=“val”]:选择具有att属性且属性值为包含val的字符串的E元素。


**选择器**:当我们定义一条样式的时候,这条样式会作用于网页当中的某些元素,选择器就是样式作用的对象。

关系选择器

ul li{ }:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

子元素选择器ul>li:与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围。

相邻选择 E+F 选择紧贴在E元素之后F元素。

兄弟选择器E~F 选择E元素所有兄弟元素F。(只可以选择到之后的元素)


伪元素选择器
E:first-letter/E::first-letter 设置元素内的第一个字符的样式。
E:first-line/E::first-line设置元素内的第一行的样式。E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用。
E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用。
E::selection设置对象被选择时的颜色。

CSS3学习笔记
CSS3学习笔记


向标题添加阴影:h1 { text-shadow: 5px 5px 5px #FF0000; }

允许对长单词进行拆分,并换行到下一行:p {word-wrap:break-word;}

通过 CSS3 转换,能够对元素进行移动、缩放、转动、拉长或拉伸。

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。效果开始于指定的 CSS 属性改变值时。
CSS 属性改变的典型时间是鼠标指针位于元素上时。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

在 CSS3 中创建动画,需要学习 @keyframes 规则。 动画是使元素从一种样式逐渐变化为另一种样式的效果。

CSS3学习笔记
从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色(根据 256 x 256 x 256 计算)。
大多数现代的显示器都能显示出至少 16384 种不同的颜色。

CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position

CSS3径向渐变制作圆形图标按钮
主要使用button标签
使用多属性来实现斑点纹理背景
径向渐变配合圆角属性border-radius实现按钮背景


首行缩进、最大宽度、最小宽度;燃烧字、浮雕字、文本描边 ;盒模型属性,文本阴影效果不会改变元素的盒子大小但可能会延伸到它的边界之外。
CSS定位

https://c.runoob.com/front-end/61

以上是CSS在线工具链接