CSS 基础

CSS 基础

CSS是层叠样式表,样式表修饰文字。HTML和CSS是结构样式分离,写法在HTML属性上属性和属性值用=拼接,CSS属性和属性值用:拼接。

  • HTML属性用=链接,CSS属性用:链接

  • 层叠的概念:同一个元素使用了不同的样式表,所有的样式进行叠加就叫做层叠。

  • 冲突的概念:同一元素设置相同的属性就会造成冲突,遵循就近原则选择就叫属性。冲突是一种代码上的逻辑错误。

  • 继承:在子父关系中文本样式可以被继承,以下代码中div为父,font为子。布局样式如宽高,不能被继承(块级元素继承父的宽,行级不行。)

CSS写法一

style内联样式,内部样式(不建议频繁使用)。

结构样式分离代码如下

<font color="red" size="7" face="宋体" style"background-color:blue;"文字标签</font>

CSS写法二

内部样式:在头部中写

<style>
font{
    
    background-color;blue;
    color:red;
    font-size:20px;
    font-family :"宋体"}
</style>

CSS写法3

外部样式表:在body中写

<link rel="stylesheet" href="./外部样式文件.css">

CSS写法4(作为了解,不常用)

1.标签选择器
2.全局选择器
/*去默认盒模型*/
*{
   margin:0;
   padding:0;
}

/*去无序列表的点*/
ul li{list-style:none;}
3.class选择器

class加.

.q{background-color:auua;}
<li class="q"> damo1 </li>
4.id选择器
#q{background-color:yellow;}
<li class="q"> damo2 </li>
5.群组选择器
b,a{
    background-color:red;
}
6.层次选择器

子代选择器

ul>li{color:red;}


<ul>
    <li> damo3 </li>
</ul>

后代选择器 空格

ul li{list-style:none;}
7.兄弟选择器( 向下 )

相邻兄弟 +

ul+a{
    background-color:red;
}

<ul>
	<a>
</ul>

通用兄弟 ~

ul>li~a{
		 background-color:red;
}
8.ui 伪类选择器

ui 伪类 a标签使用

/*默认状态*/
b+a:link{ }
/*访问后状态*/
b+a:visited{ }
/*鼠标悬浮*/
b+a:hover{ }
/*鼠标按下*/
b+a:active{ }
9.结构伪类
ul li:nth-child(3){ 
    background-color:red;
}

以上为常用原则器,其他选择器只做了解。

面试题:从属关系,加载速度区别。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值