HTML超链以及CSS基础、选择器

一、超链接a的相关属性

1、href=“书写路径”有5种写法：外部路径以及绝对路径、相对路径、空（刷新页面）、#（取消链接功能）

2、title=“鼠标悬停上去之后的提示信息”

3、target=“设置窗口的打开方式” target=“_self”默认值，本窗口打开 target=“_blank” 新窗口打开

二、CSS全称为层叠式样式表，全英文为：cascading style sheet。它的作用是用来修饰网页信息的。

三、CSS语法：选择器{属性:属性值;属性:属性值}，其中属性:属性值可以称为声明。

注意点：属性必须放在花括号中，属性与属性值用冒号链接。每条声明用分号结束。

四、 CSS引入方式可以分为三种。分别是内部样式：<style></style>，写在title下方；

行内样式（又称行间样式/内联样式/内嵌样式/嵌入式表）：写在标签中如下方：

<p style="font-size: 20px; ">111<p>

外部样式：优先创建一个.css文件，之后用link链接两个页面，其中link也包括两个属性，如下：

<link rel="stylesheet" href="css/css01.css">

rel代表声明，此文档为样式表，href为路径；

五、选择器介绍： 1、通配符：*{属性:属性值;}

2、标签选择器：标签{属性:属性值;}

3、class选择器：.类名{属性:属性值;}

4、id选择器：#ID名{属性:属性值;}

5、子级选择器：父级选择器子级选择器{属性:属性值;}

6、直属子级选择器：父级选择器>子级选择器{属性:属性值;}

7、并级选择器：选择器1,选择器2,选择器2{属性:属性值;}

8、伪类选择器效果为鼠标悬停之后：选择器:hover{属性:属性值;}

9、层级选择器：

子集选择器：父级选择器子级选择器

直属子集选择器：父级选择器>子级选择器

相邻兄弟选择器：兄弟选择器+兄弟标签

通用兄弟选择器：兄弟选择器~兄弟标签

10、属性选择器：选择器[属性]：指定属性名和属性值 input[type]

选择器[属性="属性值"]:指定属性名和其中一个属性值 input[type="text"]

选择器[属性~="属性值"]：指定属性名和属性值开头 input[type]

选择器[属性^="属性值"]：指定属性名和属性值结尾

选择器[属性$="属性值"]：指定属性名和属性值开头

选择器[属性*="属性值"]：指定属性名和包含属性值内容

选择器[属性|="属性值"]：指定属性名和属性值或以属性值-开头

前三个相对常用，后面可以当做了解

11、伪类选择器：伪类选择器都是需要加上 "："

结构性伪类

标签	说明	标签	说明
first:child	第一个元素	last-of-child	获取最后一个同类型的元素
last-child	最后一个元素	nth-of-child	第几个同标签元素
nth-child	第几个元素	only-of-child	有且仅有一个元素
only-child	有且仅有一个元素	root	根元素/目录，就是html
first-of-type	获取第一个同类型的元素	empty	空标签，没有任何元素类型，例如：<p></p>

目标伪类 target

注意：需要配合id选择器使用，一般常用于选项卡，但是存在页面刷新也不会把选项的内容更新，需要关闭浏览器之后，重新打开，所以一般还是会用js的点击效果

UI元素状态伪类

enable	表单控件可用状态
disabled	表单控件不可用状态
checked	表单控件单选多选的选中状态
selection	高亮状态，就是鼠标选中的状态

注意：（1）高亮状态只有文字有，其他的都没有，所有的选择器有的有两个：，一个：，没有区别；

（2）checked:使用时我们需要取消默认的样式，之后自己可以进行设置自己需要的样式；

appearance: none;

习题：开关

必须要用多选，之后取消样式，设置宽高，在进行before，记得打content: "";需要转换成块，之之后再进行设置一些需要的样式，再设置选中之后的状态，若是需要位移，在设置一次before；

注意：有的浏览器可能存在兼容问题，可以看之前的浏览器兼容，添加前缀即可；

否定伪类：not()

:not(p){color: red;}

动态伪类

link	未访问状态
visited	访问之后的状态
hover	鼠标悬停
active	鼠标按下
foucs	光标选中状态

注意：link/visited/hover/active 如果使用顺序不可以改变；

未访问状态需要清楚浏览器所有的缓存，并且只好使一次，可以不用太过纠结；

只有input有foucs这个状态；

12、伪元素选择器

before	之前
after	之后
first-letter	第一个字
first-line	第一行

注意：after/before需要配合conten内容使用，显示文字的时候需要用双引号；

六、权重问题：1、通配符权重为0；

2、标签选择器为1

3、class选择器为10

4、id选择器为100

5、子级选择器以及直属子级选择器为父级+子级的权重

6、并级选择器各算各的，因为获取的不是同个标签

7、伪类选择器基本上可以看做是10

注意点：如果想要增加权重可以在属性值后加上空格！important 权重为9999。但是不可常用。

HTML超链以及CSS基础、选择器相关推荐

我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础选择器半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...
CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局...
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style>#user {width: 200px;}& ...
css基础选择器 1204
css基础选择器 1204 标签选择器标签名称 {属性名: 属性值;属性名: 属性值;} 类选择器定义一个类 .类名称 {属性名:属性值;属性名:属性值; } 让标签加入这个类 <标签名 c ...
html插入精灵,帮助插入超链接到CSS精灵代码..Java？ HTML？
在CS5中使用内置的Javascript来完成滚动图像非常简单,但是,我需要基于CSS来执行此操作.帮助插入超链接到CSS精灵代码..Java? HTML? 我已经设法让代码工作和精灵都很好,但我似乎 ...
CSS基础选择器之类选择器(CSS、HTML)
CSS基础选择器之类选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta c ...
八、CSS基础选择器
一.CSS基础选择器 1.CSS选择器的作用选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用.简单来说:就是选择标签用的. 以上CSS做两件事: 找到所有的h1标签.选择器(选 ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
CSS基础选择器（标签选择器、类选择器、多类名选择器、 id选择器、通配符选择器、属性选择器）
CSS基础选择器选择器种类标识优缺点标签(元素) div 快速为某一类标签统一样式,但不能设计差异化样式类 .one-letter 为元素对象定义单独或者相同的样式 ID #app 同一个页 ...
css基础选择器有哪些
css基础选择器有哪些(熟记) 一.选择器作用:规范了页面中哪些元素能够定义好样式,同时也能帮助我们去二.选择器分类 1. 通用选择器(只能放在样式表) 1. 作用:匹配页面上的所有元素 2. 语法 ...

HTML超链以及CSS基础、选择器

HTML超链以及CSS基础、选择器相关推荐

最新文章

热门文章