长沙市建设厅官方网站,定制网站建设需要多少钱,海淀网站建设价格,重庆建设工程交易中心网站目录
1、CSS编写方式
2.CSS选择器
1.标签选择器
2.类选择器
3.id选择器
4.后代选择器
3.CSS属性 CSS叫做层叠样式表,作用就是装饰网页.类似于我们平时所说的化妆。 字体、大小、间距、颜色、位置、边框、背景等等统称为样式#xff0c;用来描述一个网页。 …
目录
1、CSS编写方式
2.CSS选择器
1.标签选择器
2.类选择器
3.id选择器
4.后代选择器
3.CSS属性 CSS叫做层叠样式表,作用就是装饰网页.类似于我们平时所说的化妆。 字体、大小、间距、颜色、位置、边框、背景等等统称为样式用来描述一个网页。 针对一个html的元素/标签同时可以有很多组CSS样式一个字体是一个样式描述一个颜色也是一个样式。
1、CSS编写方式
CSS在进行编写的时候有三种引入方式
1.内部样式把CSS嵌入到HTML中通过style标签 2.外部样式,把CSS写成一个单独的文件通过HTML的link标签引入
创建一个CSS文件 通过link标签引入 3.内联样式把CSS属性写到元素的style属性内 一般来说内联样式的优先级比较高也比较方便 2.CSS选择器
举个例子 div:就是一个选择器针对选择的内容进行属性设置
{}内就是一些具体的CSS属性描述各种样式。 好了我们接下来详细说明一下CSS的几种常用选择器
1.标签选择器
使用标签名把页面中所有同名标签的元素全选中。
此时我们选中了所有标签为div的元素设置样式
bodydiv陈宇/divdiv顾魏/divdiv琑儿/divstylediv{font-size: 23px;color: red;}/style
/body 效果 但是我们发现这种选择器是有缺点的无法针对某一个元素进行个性化设置。因此我们引入了其他的选择器---类选择器以及id选择器。
2.类选择器
通过创建一个类实现很多属性。设置元素样式时就可以直接使用这个类达到想要的效果。
比如我们创建了一个类one在里面实现了设置颜色为绿色。元素陈宇调用这个类将字体颜色设置成了绿色。
!-- s调用class时,去掉. --div classone陈宇/divdiv顾魏/divdiv琑儿/divstyle/* CSS类使用.开头 */.one{color: green;}div{color: red;font-size: 23px;}/style 我们还可以创建多个类实现不一样的样式。
!-- s调用class时,去掉. --div classone陈宇/divdiv classtwo顾魏/divdiv classthree琑儿/divstyle/* CSS类使用.开头 */.one{color: green;}.two{color: red;}.three{color:yellow;}div{color: red;font-size: 23px;}
效果 在一个标签中使用不同类 divspan classone王/spanspan classtwo一博/span/div 效果 3.id选择器
id是这个元素的身份标识我们使用id选择器可以将对应的元素设置样式
div idxiaozhan肖战/div
style/* id选择器使用#开头 */#xiaozhan{color: pink;}
}效果 以上都为基础选择器 4.后代选择器
是多种基础选择器的综合 div classoneh3王一博/h3h2琑儿/h2/divdiv classtwoh3肖战/h3/divstyle.one h3 {color: green;}.two h3{color:red;}/style 效果 此时先找实现的类的所有元素再从这个类的后代子标签/...里查找指定的标签。
举例
此时我们的第一步就是找所有实现one这个类的元素然后再从这些元素中查找标签为h3的元素设置样式 3.CSS属性
常见的属性我们都可以在下面推荐的这个网站中找到
CSS 参考手册 (w3school.com.cn)
我们简单实现几个属性
div classone哈哈哈/div
div classtwo嘻嘻嘻/div
style.one {/* 设置字体家族*/font-family: 宋体;/* 设置字体大小 */font-size: 28px;/* 设置字体粗细 (100-900)数字越大,字体越粗*/font-weight: 300;/* 设置文字样式 倾斜 */font-style:italic;}.two {color:red;/* 水平对齐 */text-align: center;/* 文本装饰 */text-decoration: line-through;}
/style 效果 RGB 光学三原色Red Green Blue. 每个颜色一个字节8个比特位0-255 三种参数比例不同展现的颜色也不同。
例如255,0,0)代表红色。 除此之外我们还可以通过十六进制来表示rgb:
一个十六进制的数字站4个比特位一个字节就是两个十六进制的数字。所以位面可以用6个十六进制的数字来表示rgb。每两个十六进制是一个分量 转换成二进制就是1111 11110000 0000 0000 0000转换成十进制就是255 00.
注如果每个分类的十六进制一样就可以简写。比如#AABBCC#ABC 背景设置
1.设置背景颜色
background-color:
div classthree哭唧唧/divstyle.three{font-size: 50px;text-align: center;width: 400px;height: 600px;color: white;background-color:green;}/style
效果 2.设置背景图片
background-image
background-image: url(cy.png);
效果 效果与我们想象的不同这是由于在默认情况下图片是平铺的。就像我们的地砖一样。所以为了美观可以使用background-repeat禁止平铺。
只需添加一行代码即可background-repeat: no-repeat;
效果 3.设置背景大小
background-size
如果发现图片不够背景大小则使用background-size的cover覆盖整个背景。 关于CSS的属性还有非常多可以看上面给的链接很全 总结
CSS作为“层叠样式表”可以通过实现多种样式装饰一个网页让网页变得更好看
