国外超酷网站,wordpress数据收集表单,东营市报名系统网站设计公司,十大接单网站一、为html添加样式的三种方法
1、内部样式
2、外部样式
3、行内样式
二、css的使用--css选择器
1、css基本选择器
元素选择器
属性选择器
id选择器
class/类选择器
通配符选择器
2、群组选择器-多方面筛选
3、关系选择器 后代选择器【包含选择器】
子元素选择器…一、为html添加样式的三种方法
1、内部样式
2、外部样式
3、行内样式
二、css的使用--css选择器
1、css基本选择器
元素选择器
属性选择器
id选择器
class/类选择器
通配符选择器
2、群组选择器-多方面筛选
3、关系选择器 后代选择器【包含选择器】
子元素选择器
兄弟选择器
4、伪元素选择器
5、伪类选择器
结构性伪类选择器
UI 状态伪类选择器 :not()排除选择器
6、CSS选择器的优先级 往期文章 前端基础---认识前端框架html、css、js、_前端代码结构-CSDN博客 前端【1】---HTML入门学习_html父子标签-CSDN博客 一、为html添加样式的三种方法
1、内部样式 内部样式是将 CSS 代码直接写在 HTML 文件的 style 标签中通常放在 head 部分为多个组件添加同一样式
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title内部样式示例/title!-- 内部样式 为多个组件添加同一样式--styleh1 {color: blue;font-size: 24px;}p {color: green;font-size: 16px;}div{color: antiquewhite;background:purple;}/style
/head
bodyh1这是一个标题/h1p这是一个段落。/pdiv这是一个div块/div
/body
/html
多个页面可以共享同一个 CSS 文件减少代码冗余。 2、外部样式 外部样式是将 CSS 代码写在一个单独的 .css 文件中然后通过 link 标签将其引入到 HTML 文件中。常用优先级最低
html文件
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title外部样式示例/title!-- 引入外部样式文件 --link relstylesheet hrefstyles.css
/head
bodyh1这是一个标题/h1p这是一个段落。/p
/body
/html styles.css文件
/* 外部样式 */
h1 {color: blue;font-size: 24px;
}
p {color: green;font-size: 16px;
} 3、行内样式 行内样式是将 CSS 代码直接写在 HTML 元素的 style 属性中。行内样式优先级最高
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title行内样式示例/title
/head
body!-- 行内样式 --h1 stylecolor: blue; font-size: 24px;这是一个标题/h1p stylecolor: green; font-size: 16px;这是一个段落。/p
/body
/html
二、css的使用--css选择器
1、css基本选择器
元素选择器
语法 : 标签名{} 通过 HTML 标签名选择元素。
标签名 {属性: 值;
}
/* 选择所有 p 标签 */
p {color: red;font-size: 16px;
}
属性选择器
属性选择器一共有7种写法
某某[属性]
元素[属性] {样式;
} 某某[属性属性值]
元素[属性属性值] {样式;
} 某某[属性^属性值]选择属性值以指定值开头的元素。 某某[属性$属性值]选择属性值以指定值结尾的元素。 某某[属性*属性值]选择属性值包含指定值的元素。 某某[属性~属性值]:选择属性值中包含指定单词的元素单词以空格分隔。 某某[属性|属性值]:选择属性值以指定值开头或以指定值开头后跟连字符 - 的元素。 id选择器
通过元素的 id 属性选择元素id 是唯一的一个页面中只能有一个元素使用相同的 id。
#id名 {属性: 值;
}
示例
p idspecial这是一个特殊的段落。/p
/* 选择 id 为 special 的元素 */
#special {color: green;font-weight: bold;
}
class/类选择器
class 可以重复使用一个元素可以有多个 class
.class名 {属性: 值;
}
示例
p classhighlight这是一个高亮段落。/p
p classhighlight这是另一个高亮段落。/p
/* 选择所有 class 为 highlight 的元素 */
.highlight {background-color: yellow;
}
通配符选择器 语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距 *{margin: 0; //外间距
padding: 0; //内间距}
要是对某几个标签执行样式而非全部标签
/*选择器组合满足一个条件即可 选择器1选择器2{} */
div,
p,
a,
.aa
{background-color: aquamarine;
} 2、群组选择器-多方面筛选
通过逗号分隔多个选择器同时为多个元素设置相同的样式
语法
选择器1, 选择器2, 选择器3 {属性: 值;
}
示例
/* 选择所有 h1、h2 和 p 元素 */
h1, h2, p {color: blue;
}
/* p标签里class属性为aa */
p.aa {color: #000;}
3、关系选择器 关系选择器 是 CSS 中用于根据元素之间的层级关系来选择元素的选择器。它们通过描述元素在文档结构中的位置关系如父子关系、兄弟关系等来实现精确的选择 后代选择器【包含选择器】
选择某个元素的所有后代元素。多层嵌套
祖先元素 后代元素 {样式;
} 子元素选择器
选择某个元素的直接子元素仅一层嵌套
父元素 子元素 {样式;
} 兄弟选择器
选择某个元素后面的所有兄弟元素平级
元素1 ~ 元素2 {样式;
}
示例 /* 选择 .container 内直接子元素中 class 为 highlight 的 p 元素 */
.container .highlight {font-weight: bold;
}
4、伪元素选择器
用于选择元素的特定部分如首行、首字母等
选择器::伪元素 {属性: 值;
} 常用伪元素 ::before在元素内容之前插入内容。 ::after在元素内容之后插入内容。 ::first-line选择元素的第一行。 ::first-letter选择元素的第一个字母。 示例
/* 一、首字母first-letter 只使用于能让元素竖着布局的标签*/
div::first-letter
{color:yellow;font-size: 40px;
}
/* 二、首行 对于英文需要自己加入空格分隔*/
div::first-line{color:yellow;font-size: 40px;}
/* 三、往前/后加东西 可以用来做一些特效*/
/* 如果不写文字用content: */
div::before {content: 新添加的内容;color: antiquewhite;background-color: aqua;}
div::after {content: 新添加的内容;color: antiquewhite;background-color: aqua;}
5、伪类选择器 伪类选择器 是 CSS 中用于选择元素特定状态或位置的选择器。它们以冒号:开头用于匹配元素的某种状态如鼠标悬停、焦点状态或位置如第一个子元素、第 n 个子元素 ulli列表项 1/lili列表项 2/lili列表项 3/li
/ul
结构性伪类选择器
用于根据元素在文档结构中的位置选择元素。
:nth-child(n) 选择父元素下的第 n 个子元素,从前往后数。 n 可以是数字、表达式如 2n1、关键字odd 奇数even 偶数。 注意只认数字如果类型不匹配样式不会生效。 ul li:nth-child(odd) {color: blueviolet;
} :nth-last-child(n) 从后往前数选择父元素下的第 n 个子元素。 示例 ul li:nth-last-child(2) {color: blue;
} :first-child选择父元素下的第一个子元素。 :last-child选择父元素下的最后一个子元素。 示例 ul li:first-child {color: red;
}
ul li:last-child {color: green;
}
:nth-of-type(n) 选择父元素下同类型的第 n 个子元素。 既认数字又认类型。 示例 ul li:nth-of-type(2) {color: blueviolet;
} :first-of-type 和 :last-of-type :first-of-type选择父元素下同类型的第一个子元素。 :last-of-type选择父元素下同类型的最后一个子元素。 示例 ul li:first-of-type {color: red;
}
ul li:last-of-type {color: green;
}
UI 状态伪类选择器
用于根据元素的状态选择元素。
:hover
选择鼠标悬停在元素上时的状态示例当鼠标悬停在按钮上时按钮背景颜色变为黄色。
/* 鼠标悬停时改变背景颜色 */
button:hover {background-color: yellow;
} 【拓展】 /* tramsition过度动画不会突然变成某样式 */ li{transition: all,2s,linear;}li:hover{color: aquamarine;} transition 是 CSS 中用于定义过渡效果的属性。 all表示所有属性都会应用过渡效果如颜色、背景、大小等。 2s表示过渡效果的持续时间为 2 秒。 linear表示过渡效果的时间函数为线性匀速。 作用 当 li 元素的任何属性发生变化时会以匀速的方式在 2 秒内完成过渡。 :active
选择元素被激活如鼠标点击时的状态。示例当用户点击按钮时按钮背景颜色变为红色
/* 点击时改变按钮颜色 */
button:active {background-color: red;
}
:focus
选择元素获得焦点时的状态如表单输入框示例当用户点击输入框时输入框的边框颜色变为蓝色
/* 输入框获得焦点时改变边框颜色 */
input:focus {border-color: blue;
}
:checked
选择被选中的单选框或多选框示例当用户选中单选框时单选框的背景颜色变为绿色
/* 选中时改变单选框的背景颜色 */
input[typeradio]:checked {background-color: green;
}
示例为被选中的单选框或多选框添加一个金色的阴影效果
input:checked{box-shadow: 2px 2px 2px gold;/* 加阴影---水平方向偏移量竖直方向偏移量模糊度颜色 */
} :not()排除选择器
用于选择 不满足指定条件 的元素
元素:not(选择器) {样式;
} 元素可以是任何 HTML 元素如 div、p、li 等。 选择器可以是任何有效的 CSS 选择器如类选择器 .class、ID 选择器 #id、属性选择器 [attr] 等。 6、CSS选择器的优先级 选择器写的越长越准确优先级越高【特异性越高优先级越高】 ID 选择器 类选择器 元素选择器 同级别长度下CSS 按照代码顺序执行同一样式后边的会把前面的覆盖掉不同样式会叠加
