Dreamweaver:[51]网页制作之css样式的嵌套
1、打开软件,输入两个段落的文本。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/f59dbe39131fceec491598c679c4ec9958430b60.jpg)
2、为第一个文本设置一个id,比如id是css。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/f385f29959430401e832eff1d66b04d148290560.jpg)
3、在两个段落的文本随便在中间取两个字加上下划线。这样就形成了一个嵌套,就是在段落元素下有了一个下划线的元素。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/5c2a1ad149299a889fdf195667eeadbcbf2f7f60.jpg)
4、给下划线元素加个css样式,打开css样式窗口,点击新建css规则。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/acfda02f4770461872161588b08602214e577660.jpg)
5、在弹出的对话框中,选择器类型为元素,选择器元素为em。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/3ac71c214f579356e0770993effb960b30217060.jpg)
6、在弹出的css规则定义窗口,选择属性,比如文本颜色为红色。文本大小为36px。点击姑百钠恁确定,发现有下划线元素的字体就改变了。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/f9617afb960b3121bdadf510dee983aee9d76d60.jpg)
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/04201aa355e983ae541ba89968efe07815316960.jpg)
7、但是,如果在新建css样式的时候,选择器类型选为复合,选择器名称为#css em,注意中间空一格。css规则定义的文本大小为36px,文本颜色为红色。结果是只有上面文本的下划线的内容发生了变化。
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/82eff6d7592ae3ef5fb4e58254b6326c56666460.jpg)
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/e1390a31dfb6326c94aa687c89532f6322856060.jpg)
![Dreamweaver:[51]网页制作之css样式的嵌套](https://exp-picture.cdn.bcebos.com/988e1c532f63238528fa1322cce833e038725d60.jpg)
8、这就是css样式的嵌套,比如#css em,中间空一格。这就对一个id下面的所有em元素创建了一个css规则。
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:77
阅读量:55
阅读量:86
阅读量:20
阅读量:67