【黑马程序员】CSS的相关知识整理

CSS是层叠样式表的缩写,它可以对页面进行精细的设置,精确到像素级别,是描述元素的皮肤。

一.设置方法

设置CSS有三种方法

(1)       元素内联,就是在元素属性里定义CSS。

在元素标签内部用style="background-color:Red"来设置

(2)       页面嵌入

在<head>中加入<style type="text/css">

       input{background-color:green;border-bottom-color:white}

</style>

(3)       外部引用

新建样式表,在样式表中写CSS,然后通过在页面中<head>里加上

<link type="text/css"rel="Stylesheet" href="CSS1.css"/>

 

(4)       常见样式

①     background-color:  背景颜色

②    color:文本颜色

③    border-style:solid:边框风格,实线,dotted(点)

④    border-color:边框颜色

⑤    border-width:宽度

⑥    display:元素是否显示,可选值:none(不显示),block(块级元素,此元素前后会带有换行符),inline(内联元素,元素前后没有换行符)

⑦    cursor,鼠标在元素上显示的光标图案,cursor(默认光标),pointer(超链接的手),text(输入光标),wait(沙漏),help(问号),cursor:url(光标路径),页面加载时将光标变成特定图案

⑧    li不显示原点:LIST-STYLE-TYPE:none

(5)       样式选择器

(a)   标签选择器:在标签内部定义CSS

(b)   class选择器:命名一个class,如 .warning{background:yellow;}

然后在用到这个样式的地方加上class=“warning”,当两个以上的class时,中间用空格隔开

 

(c)   标签+class选择器:可以针对不同标签,实现同样的格式名对于不同的标签有不同的样式,只要在样式名前加标签名就行

input.name{text-align:right;color:red;}

label.name{font-style:italic;}

<input class="name" type="text"value="efce"/>

<label class="name">decfrwsv</label>

(d)   id选择器

#name

font-size:xx-large;

然后在需要用到的地方填上id="name"就行

 

 

(e)   其他选择器

1)  关联选择器

P strong{color:red}

表示P标签内的name标签内的内容使用的样式

<strong>srgfrg</strong>

<p><strong>fwesf</strong></p>

2) 组合选择器

H1,H2,Input{}

表示H1,H2都采用这种样式

3) 伪选择器

类似
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值