打开超链接如何设置css属性?

html-css018

打开超链接如何设置css属性?,第1张

通过 CSS,可以在 HTML 中的超链接元素上设置样式。

首先,可以使用 a 标签选择器来选择所有超链接元素。例如:

a {

color: blue

text-decoration: none

}

color:设置超链接文本的颜色

text-decoration:设置或删除下划线

接着,可以使用 :link、:visited、:hover、:active 四个伪类来设置不同状态下的样式。

例如:

a:link {

color: blue

}

a:visited {

color: purple

}

a:hover {

color: red

}

a:active {

color: orange

}

:link 表示未访问过的链接

:visited 表示已经访问过的链接

:hover 表示鼠标悬停在链接上的状态

:active 表示正在点击链接的状态

一、字体属性

css中对文字样式的设置主要包括字体设置、字体大小、字体粗细、字体风格、字体颜色等。

二、文本属性

文本属性是对一段文字整体地进行设置。文本属性的设置包括设置阴影效果、大小写转换、文本缩进、文本对齐方式等。

四、边框属性

利用css边框属性可以设置对象边框的颜色、样式以及宽度。

border-with:边框宽度

border-style:边框样式

border-color:边框颜色

border-style的取值及说明

五、列表属性

在css中列表属性是设置无序列表标记(<ul></ul>)的呈现形式。

六、鼠标属性

在css中可以通过鼠标指针的cursor属性设置鼠标指针的显示图形。

语法:cursor:鼠标指针样式;

CSS选择器、CSS属性

style写在head中间,type="text/css"可以不用写,默认就是这个。

规定文字样式、粗细、大小、字体的属性

1、字体不存在用户电脑上时:

不处理时,使用用户电脑系统默认字体

处理:font-family:“不存在的字体”,"备选字体";--设置备选字体,可设置多个备选字体

2、一串字符串既有中文,又有英文时,如何设置两种字体

英文字体是中文字体的子集。【意思是:英文字体不能处理中文,中文字体可以处理英文】

文本装饰、文本对齐,文本缩进的属性

文本装饰-文字的下划线,中划线等

文本对齐:

文本缩进:

格式:

p{

font:20px,"楷体"

}

标签选择器选中的是页面中所有的该标签

作用:根据指定的id名称找到对应的标签,然后设置属性。(标签选择器选中的是全部的同类标签)

第一步:给需要设置的标签设置id,

第二步:

注意:

1、id在同一页面是唯一的

2、id名是有规范的,只能是字母,数字和下划线,不能使用数字开头,不能使用HTML的标签名

3、如果仅仅是为了设置样式,不需要使用id,而是使用类选择器,id是留给js使用的。

根据指定的类名称找到对应的标签,然后设置属性

第一步:给需要设置的标签设置className,

第二步:

注意:

1、className是可以重复的

2、className名是有规范的,只能是字母,数字和下划线,不能使用数字开头,不能使用标签名

3、如果仅仅是为了设置样式,不需要使用id,而是使用类选择器,id是留给js使用的。

4、同一个HTML变迁可以有多个classname

1、id使用“,”class使用#

2、class相当于人名,所以同一个页面上的HTML标签可以有一样的className;

id相当于身份证,所以同一个页面上的HTML标签不可以有一样的id;

3、class相当于人名,所以,一个HTML标签可以有多个Class

id相当于身份证,所以,一个HTML标签只能有一个id

4、一般情况下设置样式,使用class;如果需要js配合,使用id

格式:

先祖位置可以是HTML标签,可以是class名,可以是id

后代位置可以是HTML标签,可以是class名,可以是id

可以随意组合

只会查找直接子元素

格式:

1、都可以使用HTML标签、id名、class名

1、后代使用空格,子使用>

2、后代可以选取指定标签的所有特定标签,包括子、孙;而子只能选取指定标签的特定子标签

定义:两个选择器相交的部分

格式:

选择器1选择器2{

}

选择器1和选择器2之间没有任何符号,没有空格,没有>

选择器1和选择器2之间有逗号。

相邻:选择器1+选择器2,给紧跟着选择器1后面的选择器2设置样式

通用:选择器1~选择器2,给选择器1后面的所有选择器2设置样式

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签【n的值可以是数值,可以是“odd”、“even”,也可以是表达式,比如xn+y】

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

| [ attribute ] | [target] | 选择带有 target 属性所有元素。 | 2 |

| [ attribute = value ] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |

| [ attribute ~= value ] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |

| [ attribute |= value ] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |

| [ attribute ^= value ] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a>元素。 | 3 |

| [[ attribute =value] 选择器") | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a>元素。 | 3 |

| [ attribute = value*] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a>元素。 | 3 |

1、属性的取值是以什么开头的

[ attribute |= value ]----------------CSS2

优先使用CSS3的。

2、属性的取值是以什么结尾的

3、属性的取值是否包含某个特性的值的

[attribute~=value]

*{

}