小型IT网站开发公司,怎么把自己的网站发布到网上,百度移动网站检测,小说关键词搜索器目录 ✨CSS的使用#xff1a;行内样式内部样式外部样式 ✨CSS基本选择器#xff1a;id选择器class选择器标签选择器 ✨优先级#xff1a;选择器的优先级样式表的优先级 ✨CSS的使用#xff1a;
根据定义CSS的位置不同#xff0c;分为行内样式、内部样式和外部样式
行内样… 目录 ✨CSS的使用行内样式内部样式外部样式 ✨CSS基本选择器id选择器class选择器标签选择器 ✨优先级选择器的优先级样式表的优先级 ✨CSS的使用
根据定义CSS的位置不同分为行内样式、内部样式和外部样式
行内样式
也称为内联样式 直接在标签中编写样式通过使用标签内部的style属性
一般在测试的时候使用居多
语法
标签 style样式1值1;样式2值2;....样式N值N;hello my css/标签
案例
div stylecolor: red; width: 100px; height: 100px;background-color: #acacac 第一个div/div运行结果 弊端只能对当前的标签生效没有做到内容和样式相分离耦合度太高。
内部样式
定义在head标签内通过style标签该标签内容就是CSS代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylediv{color: red;}
/style
body
div第一个div/div
/body
/html外部样式
1、提前定义css资源文件 2、在head标签内定义link标签引入外部样式文件。
try.css文件定义在与html页面同级的css文件夹中 例如 写入
div {
color: red;
}
html文件中写入
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefdemo1.css
/headbody
div第一个div/div
/body
/html同样的样式作用在同一个标签身上就近原则不同样式作用在同一个标签身上:叠加生效。
✨CSS基本选择器
筛选具有相似特征的元素
id选择器
选择具有相同id属性值的元素建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title!-- id选择器 --style#myDiv{color: aqua;}/style/headbodydiv idmyDiv文字1/divdiv idmyDiv文字2/div/body
/html
class选择器
选择具有相同的class属性值的元素
class 选择器用于描述一组元素的样式class 选择器有别于id选择器class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中类选择器以一个点.号显示
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title!-- class选择器 --style.myClass{color: #800080;}/style/headbodydiv classmyClass文字1/divdiv classmyClass文字2/div/body
/html
标签选择器
选择具有相同标签名称的元素。
定义选择器语法标签名称{}
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title!-- 标签选择器 --stylep{color: chartreuse;}/style/headbodyp文字1/pp文字2/p/body
/html
✨优先级
选择器的优先级
ID选择器 类选择器 标签选择器
当多个选择器作用在同一个标签上的时候如果属性冲突看优先级如果不冲突样式叠加生效。
样式表的优先级
行内样式 内部样式 外部样式
同样三个样式表中都有内容作用在同一个html标签的时候如果属性冲突看优先级如果不冲突样式叠加生效。
