03 css选择器

7种选择器

  

/* 1.标签选择器 */
			ul{
				background-color: #0000FF;
			}
			/* 2.id选择器 */
			#u{
				background-color: red;
			}
			/* 3.类选择器:标签之间共有的特性可以使用它 */
			.test{
				background-color: pink;
			}
			/* 4.组合选择器:选择器间共有的特性使用它 */
			.test,#u{
				font-size:20px;
			}
			/* 5.全部选择器 */
			*{
			color: darkgreen;	
			}
			/* 6.子标签选择器:注意不能选孙标签:如下只作用到#u下面的li标签,并没有作用到a标签 */
			#u{
				color: white;
			}
			/* 7.属性选择器:指定含有某属性且属性值为指定值的标签*/
			a[href="#"]{
				color:pink;
			}
			/* 8.伪类选择器:标签:指令*/
			li a:hover{
				color: orangered;
			}

  其中伪类选择器请参考:https://www.runoob.com/css/css-pseudo-classes.html

选择器的优先级

  1. 内联样式的优先级是 1000;
  2. id选择器的优先级是 100;
  3. 类和伪类选择器的优先级是 10;
  4. 元素选择器的优先级是 1;
  5. 通配*选择器的优先级是 0;
  6. 继承的样式选择器 -1;

写css的套路

1.声明css代码域

2.使用选择器选择要添加样式的标签

根据需求来:

  • 使用全部选择器给整个页面添加样式
  • 使用类选择器给不同的标签添加样式
  • 使用标签选择器给某类标签添加样式
  • 使用id选择、属性选择器等其它选择器添加样式

3.书写样式单

3.1边框设置

border:solid red 1px;

  

3.2字体设置

font-size:10px;
font-family:"黑体";
font-weight:bold;

  

3.3字体颜色设置

color:red;

  

3.4背景颜色设置

background-color:red;

  

3.5背景图片设置

background-img:url;

  

3.6宽高设置

3.7浮动设置

float:left/right;

  

3.8行高(行间距)设置

line-height:10px;

  

posted @ 2020-01-13 00:28  Scorpicat  阅读(204)  评论(0编辑  收藏  举报