蓝桥杯复习-css(2)

69 阅读3分钟

display属性,浮动,定位这三个挺重要的.不过我在看复习材料的时候我觉得他写的不怎么好.只记住理论是没有用的,主要还是要会应用... 所以理论我就不赘述了,如果有合适的案例我后面再说吧. 然后接下来我们开始正题了.

1.伪类选择器

在 CSS3 中有以下几种 UI 伪类选择器。

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。

这个,他给了一个验证邮箱的demo,不过问题挺大的.他默认的时候居然是验证有效....这边我建议还是自己写js弄一下,别用他给的伪类选择器. 这里我直接把图放出来让大家看看他有多抽象..

邮箱验证bug.png

2.文字阴影

在 CSS3 中,我们使用 text-shadow 属性来给文本内容添加阴影的效果。

文本阴影的语法格式如下:

text-shadow: x-offset y-offset blur color;
  • x-offset 是沿 x 轴方向的偏移距离,允许负值,必须参数。
  • y-offset 是沿 y 轴方向的偏移距离,允许负值,必须参数。
  • blur 是阴影的模糊程度,可选参数。
  • color 是阴影的颜色,可选参数。

写了一个demo.

div {

        font-size: 100px;

        color: rgb(0,153,153);

        text-shadow: 4px 4px 3px rgb(0,153,153);        }

他这个不知道为什么一开始会放不出来....可能我不太会用这个编辑器

文字阴影示例图.png

  1. 圆角边框

border-radius 属性的值表示圆角的直径,可以设置四个值,其值的顺序为:左上角,右上角,右下角,左下角。 懒得放图了,这个就是把正方形变成圆形的属性. 建议连写,因为他单独写你不太好记的...

border-top-left-radius: 取值; border-top-right-radius: 取值; border-bottom-right-radius: 取值; border-bottom-left-radius: 取值;

4.关于文本溢出

text-overflow 属性可以设置超长文本省略显示,其语法如下所示:

text-overflow: clip|ellipsis;

其属性值的含义如下所示:

属性值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。

这个我是不太理解第一个属性的..他的效果图实在是一言难尽..看看第二个就行吧. 另外,他如果要使用的话,也要配合一下这两个属性:overflow: hidden; /隐藏超出文本/ white-space: nowrap; /强制单行显示/

好了,今天大概就先说那么多.希望明天还能学习?封校不易,学习真是百年难得一见的事情.