中国化工第九建设公司网站,做转运网站,上海网站建设哪家比较好,餐饮公司介绍模板CSS
层叠样式表#xff0c;为了定义HTML标签的样式 内联样式 在标签内部通过 style 属性设置样式值样式名:样式值;样式名:样式值; 内部样式 在 head 标签内通过 style 标签选择器设置样式#xff0c;供这个网页上的元素使用 外部样式 在 head 标签内通过 link 标签引入外部…CSS
层叠样式表为了定义HTML标签的样式 内联样式 在标签内部通过 style 属性设置样式值样式名:样式值;样式名:样式值; 内部样式 在 head 标签内通过 style 标签选择器设置样式供这个网页上的元素使用 外部样式 在 head 标签内通过 link 标签引入外部的 CSS 文件
内联样式
div styleheight:200px; width:200px; background-color: red;/div内部样式
head!-- typetext/css代表标签内部是css代码 --style typetext/cssdiv {width: 200px;height: 200px;background-color: blue;}/style
/head
body!--从结果上可以看出内联的优先级要比内部样式的优先级高--div styleheight:200px; width:200px; background-color: red;/divdiv/divdiv/div
/body外部样式
内部样式和外部样式根据在head标签的先后顺序执行有可能先执行完的样式会被后面的样式覆盖掉
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6UNbcyK-1677158598500)(C:\Users\99498\AppData\Roaming\Typora\typora-user-images\image-20230214204308547.png)]
需要在 html 文件中通过 link 标签导入这个 CSS 文件。
headstyle typetext/cssdiv {width: 200px;height: 200px;background-color: blue;}/style!--注意不要忘记写rel属性--link hrefcss/c1.css relstylesheet/
/head
body!--从结果上可以看出内联的优先级要比内部样式的优先级高--div styleheight:200px; width:200px; background-color: red;/divdiv/divdiv/div
/body选择器 id 选择器 #div1 {width: 200px;height: 200px;background-color: blue;
}
div iddiv1/divclass 选择器。一个标签可以有多个class值中间用空格隔开 .d1 {width: 200px;height: 200px;background-color: blue;
}div classd1/div
div classd2/div
div classd1 d2/div标签选择器直接通过标签名找到元素 上下文选择器 后代选择器 父选择器 子选择器找到这个父元素的所有子元素。子选择的元素是父元素的后代不管是不是父子还是爷孙辈 子元素选择器 父选择子选择只找自己的亲儿子 兄弟选择器 选择器1 选择器2通过选择器 1找选择器2的兄弟关系的元素通过哥哥找相邻的弟弟 style typetext/css.d1 div{width: 300px;height: 300px;}!--在定位到classd1之后选择它的子标签中的div标签, 也能定位到孙子重孙子...元素--.d1 div{width: 300px;height: 300px;}!--在定位到classd1之后选择它的子标签中的div标签只能定位到儿子元素--.d1div{width: 300px;height: 300px;}!--在定位到classc2之后选择它的兄弟标签只能定位到当前元素的相邻的下一个元素--.c2span {font-size:40px;}!--标签属性选择器--input[typenumber] {font-size: 30px;}!--伪类选择器,鼠标放到该元素上d3这个类才会使用这个样式--.d3:hover {}
/stylediv classd1div11/divdiv class c222/divspan33/span
/div
input typenumber/input属性选择器 通过标签的属性找到元素input[typenumber] 伪类选择器
选择器优先级
优先级从大到小
important内联样軾id 选择器class 选择器标签
.d3 {width: 150px;height: 150px;!--!important 会提高该选择器的优先级--background-color: red!important;
}
