189 8069 5689
属性
通过属性的复杂叠加才能做出漂亮的网页
创新互联公司-专业网站定制、快速模板网站建设、高性价比乐山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式乐山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖乐山地区。费用合理售后完善，10余年实体公司更值得信赖。
选择器
通过选择器找到对应的标签设置样式
选择器的作用
选择对应的标签，为之添加样式
标签选择器
根据标签名找到标签
选择器
22222222222
22222222222
22222222222
1111111111111111
1111111111111111
1111111111111111
代码：这是普通的页内样式； 注意style中的注释方式不一样。
上图：
可以看到业内样式设计成功； 那怎么将其中部分内容单独进行设计呢，使用行内样式的确可以做到，但是body中一般都是做内容和结构，所以尽量不要使用行内设计。
所以我们可以通过类选择器来设计，为某个或多个内容进行类命名，然后针对命名的类进行设计。
选择器
22222222222
22222222222
22222222222
1111111111111111
1111111111111111
1111111111111111
代码↓
在body中为两个内容进行类命名为 test1；
通过点“.”+类选择器名称，对类命名为test1的内容进行设计。
上图：可以看到类选择器的设计为蓝色
选择器
22222222222
22222222222
22222222222
22222222222
22222222222
1111111111111111
1111111111111111
1111111111111111
1111111111111111
代码↓：
在body中，在内容中使用 id="" 来定义id，这个id是唯一的，不可重复，否则会报错；不过在html中多个内容使用同一个id也是可以成功的，这是因为html是弱类型语言，在JS中就会报错。
在style中使用#main{} 来设计该id的样式
p , #main{
border: 4px dashed green;
}代码↓：
在style中加入上面的代码； 表示或p或#main的标签都会被设计；
可以放多种标签进行同时设计
复合选择器就是与的关系。
不管放了几个标签，都必须同时符合才会生效设计内容。
/*复合选择器*/
p.test1{
font-size: 66px;
}
div#main{
font-size: 10px;
}代码：新增上面的代码； 设计了两个复合选择器； 每个复合选择器的两个条件都必须同时满足，注意复合标签之间不能有空格。
上图：可以看到同时满足两个复合条件的标签的字体大小改变了。
选择器
22222222222
22222222222
22222222222
22222222222
22222222222
1111111111111111
1111111111111111
1111111111111111
1111111111111111
代码↓：
body下面增加了部分内容；
style中增加了后代选择器设计，先满足div标签，div后面要满足.test3标签，test3后面要满足a标签；
/*后代选择器*/
/*div .test3 a{*/
/* font-size: 66px;*/
/*}*/
div a{
font-size: 66px;
}代码：如果把中间的某一个标签去掉也是可以的，因为a也属于div的后代。
/*后代选择器*/
/*div .test3 a{*/
/* font-size: 66px;*/
/*}*/
/*div a{*/
/* font-size: 66px;*/
/*}*/
#test2 .test3 a{
font-size: 66px;
}
代码：将最前面的标签改成#test2 也是满足条件的。
与后代选择器效果差不多，但要求必须是紧挨着的下一级符合才可以，跳过匹配某个标签的后代是不生效的。
上图：
必须是div下面紧挨着的p标签才会生效；
div下的span的p标签是不生效的；
直接后代选择器表达： div > p{}
上图：倒数第2个p标签与其上面的div标签相邻
上图：匹配div标签，且div中有名为name的属性； 第1条和第2条会相匹配。
上图：多属性选择器的匹配方法。 第二条匹配。
上图：匹配div，名为name的属性，且name属性的值要是“jack”，满足这三个条件才能匹配
其中常用的有focus和hover
/*伪类选择器*/
input:focus{
width: 500px;
height: 60px;上2代码：body中添加input内容； style添加针对input:focus的设计；
上图：默认没有点击的样式
上图：点击后的样式，就变成我们设计的样子了，高度和宽度再点击（聚焦）的时候就改变了。
input:focus{
width: 500px;
height: 60px;
/*调整边框*/
outline: none;
border: 1px solid red;代码：调整边框，先将原来的边框给去掉（outline: none），才能重新定义新的边框。
上图：如果不先去掉原来的边框，新的border 样式就不会生效。
/*id选择器*/
#main{
font-size: 60px;
width: 500px;
height: 200px;
background: deepskyblue;
}代码：修改id选择器的设计样式
上图：当前修改后的样式
#main:hover{
width: 100px;
height: 100px;
}代码：在style中增加上面的代码的样式
上图：将鼠标悬浮在上面的时候，可以看到边框大小改变了。
#test4:first-letter{
font-size: 55px;
}我是段落
上2代码：
body增加一个段落，并且使用id选择器；
style中增加first-letter伪元素
上图：文本的第一个字母的样式改变了