head img 选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS的选择器分为两大类:基本选择题和扩展选择器。
基本选择器:
标签选择器:针对一类标签ID选择器:针对某一个特定的标签使用
类选择器:针对你想要的所有标签使用
通用选择器(通配符):针对所有的标签都适用(不建议使用)
首字母必须是字母或者下划线不能是数字和其他
1、首先打开DreamweaverCC2018软件新建一个html文件,在右上角点击CSS设计器,并在下方点击加号,然后选择创建新的CSS文件:
2、在创建窗口中,点击浏览按钮。
3、然后选择站点创建好CSS文件夹,然后输入创建的CSS的名字,点击保存插件文件:
4、然后把添加为设置成链接,点击确定按钮:
5、添加完成后就可以在右侧的站点中的CSS文件夹下看到刚创建好的CSS样式表文件了:
6、此时在html文件中的head标签中,就多了一行链接到CSS文件的代码。在顶部tab标签中也可以看到链接的样式表:
7、接下来在html网页编辑页面,在body标签中输入一个div:
8、然后在顶部tab标签中选择刚才创建的CSS样式表,并在样式表中写一个样式,命名为aaa,并按下快捷键Ctrl+S保存样式表:
9、最后回到html编辑页面,在div标签中引入class,输入刚才写的样式的名称aaa并保存网页:
10、最后点击顶部的设计按钮,就可以看到实时效果了,此时css文件就成功链接进去了:
css增加边框没有间隙的方式如下
方法一:通用兄弟选择器( ~ )
Document
ul {margin: 0; padding: 0;}
li { list-style: none; height: 50px; line-height: 50px;}
li~li {border-top: 1px solid #000;}
1
2
3
4
5
6
li~li {...} 中的 ~ 符号称为通用兄弟选择器,匹配P元素之后的P元素,所以第一个P元素不会匹配到。
方法二:伪类选择器( :first-of-type / :last-of-type )
Document
ul {margin: 0; padding: 0;}
li { border-top: 1px solid #000; list-style: none; height: 50px; line-height: 50px;}
li:first-of-type {border-top: none;}
1
2
3
4
5
6
首先将所有 li 设置 border-top,然后用 :first-of-type 查找到第一个 li ,取消border-top。
Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有