Blogger Information

Blog 40

fans 0

comment 0

visits 16034

Special Recommendation

More>

Related recommendations

1. 认识css

css的基本构成：选择符，属性，属性值
例：p{color:#ff0000}
css对大小写不敏感，推荐使用小写
属性与属性值之间用:分开，多个属性用;间隔。
css中注释方式：/* 注释内容 */

2. 放置css的几种方式

内联样式（行内引用）
```
<p style=""></p>
```

内嵌样式（内部引用）

<!doctype html>
<html>
 <title></title>
 <head>
    <style>
    p{
       color:#ff0000;
       fontsize:15px;
    }
    </style>
 </head>
</html>

外联样式（外部引用）

<!doctype html> 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css文件地址">
  </head>
</html>

3. CSS选择器

(1). 基本选择器

类选择器（class选择器）
- 在css中用.来查找。（类选择器中可以多个属性，用空格分开）
唯一选择器（ID选择器）
- 在css中用#查找。
通配符选择器(*)
- 匹配所有标签
标签选择器
- 根据html中的标签来选择对应的标签名，这个时候该页面的所有该标签都会被选择。

(2). 层级选择器

组合选择器。多个选择器用逗号分开：选择器1，选择器2，选择器3。如：div,p
包含选择器。选择器1 选择器2。表示选择器1包含选择器2。如：div p
子选择器。选择器1>选择器2.表示选择器1的子元素为选择器2.如：div>p
相邻选择器。选择器1+选择器2.表示选择紧贴在选择器1之后的选择器2元素.如：div+p
兄弟选择器。选择器1~选择器2。表示选择器1后面的所有兄弟元素选择器2.如div~p

(3). 属性选择器

属性选择器：就是通过属性名或者属性值来查找某个元素。
名称介绍
- E element 表示元素标签
- ATT attribute 表示属性
- VAL value 表示属性值
标签[属性]
- E[ATT] , 表示匹配所有具备ATT属性的 E元素，不考虑属性值。
- E[ATT=VAL], 匹配所有ATT属性的值等于VAL的E元素。
- E[ATT~=VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
- E[ATT|=VAL],匹配所有ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解即可）。
- E[ATT^=VAL],属性ATT的值以VAL开头的E元素。
- E[ATT$=VAL],属性ATT的值以VAL结束的E元素。
- E[ATT*=VAL],属性ATT的值包含VAL的E元素。
```
input[type="text"]{
border:1px solid red;
}
```

(4). 结构性伪类选择器

伪元素选择器（不是真正的元素选择）
- E:first-line E元素的第一行
- E:first-letter E元素的第一个字母
- E:before E元素的内容之前
- E:after E元素的内容之后
结构性伪类选择器

（内容待添加）

(5). 状态伪类选择器

:link 设置超链接a在未被访问前的样式
:hover 设置元素在鼠标悬浮时候的样式（适用于所有元素，不限于超链接）
:active 设置超链接被a被激活时的样式（点了鼠标还没放开的时候状态）
:visited 设置超链接a被访问过的样式

(6). 选择器优先级

内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配符选择器，优先级0

当包含多种选择器时，需要多种选择器的优先级相加后再做比较.选择器的优先级不会超过最大优先级数量级1000，如果选择器的优先级一样，则使用靠后的样式。
并集（组合）选择器的优先级是单独计算。
如果在样式的最后加上 !important,优先级则为最高，超过内联样式。所以在开发中，尽量避免使用。

4. CSS的基本属性

(1). 字体属性

color：字体颜色
font-style：字体的样式（正常或者斜体）（斜体：font-style:italic;）
font-size：字体的大小
font-family：字体族科（使用哪种字体，必须客户端存在的字体）
font-weight：指定字体的粗细（font-weight:bold;值也可以是数字，最大为900）
font-variant：设置字体为小型的大写字母（font-variant:small-caps;）
font 简写属性：斜体/小型大写字母/粗体/(字体/行高)/族科
letter-spacing：设置字的间距
word-spacing：设置单词的词间距（对中文无效）
opacity：设置颜色的透明度（值从0-1，数字越小越透明）
overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条
text-overflow 让溢出的文字以省略号显示
white-space 设置文字是否在同一行显示

(2).文本属性

text-align:元素内容对齐方式（值：默认：left，center，right）
text-decoration:指定文本是否有修饰，默认为none
- underline：下划线
- overline：上划线
- line-through：删除线，中间划线
text-indent：文本首行缩进
text-wrap：设置当前行超过指定容器的边界时是否换行。
vertical-align：设置对象内容垂直的对齐方式。
line-height：设置对象的行高（当字体的行高和容器高度相同的时候，文本就会居中显示）

(3).背景属性

background-color：背景颜色默认值：transparent透明的
background-image：背景图片（background-image:url(‘./img/123.jpg’);）
background-repeat:背景图片是否重复。
- 默认值：repeat：背景图默认向水平和锤子方向重复。
- repeat-x:背景图水平方向重复铺平。
- repeat-y：背景图片垂直方向重复铺平。
- no-repeat：不会重复
- inherit：属性设置从父元素继承。
background-size：设置背景图片大小（background-size:80px 60px;）
background-position：设置背景图片相对于外层容器的位置。
background-attachment：背景图片是否随内容滚动。

background 背景属性简写

background: #00ff00 url('smiley.gif') no-repeat fixed center;

(4).尺寸属性

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php学习准备内容

2023-03-02 18:03:17