Css-1

Posted yangzhaon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Css-1相关的知识,希望对你有一定的参考价值。

注释:

  1. 单行注释:

    /*需要注释的内容*/

  2. 多行注释:

    /*

    需要注释的多行内容

    */

使用css样式的三种方式:

????1、head内style标签内部直接写css代码

????2、link标签引入外部css文件

????3、直接在标签内部通过style属性书写css样式

?

如何查找标签

????基本选择器:

  1. 标签选择器

技术图片

  1. id选择器

技术图片

  1. 类选择器

技术图片

4、通用选择器

技术图片

????组合选择器如:div和span

  1. 后代选择器

    Div span

    Div下的sapn

  2. 儿子选择器

    Div > span

    ????????所有父类是div的span

  3. 毗邻选择器

    Div+span

    ????紧接着div后面的span元素

  4. 弟弟选择器

Div~span

Div后面所有的span标签

?

属性选择器:

????1、[xxx]

????????只要有xxx属性名的标签都找到

????2、[xxx="1"]

????????只要标签有属性名为xxx并且值为1

????3、p[xxx="2"]

????????P标签内必须有属性名为xxx并且值为2的标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
[xxx] {
color:red;}
[xxx=‘1‘] {
color: blue;}
p[xxx=‘2‘] {
color:green;}
</style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名,应该是红色</p>
<p xxx="1">我有属性名和属性值并且值为1,应该是蓝色</p>
<p xxx="2">我有属性名和属性值并且值为2,应该是绿色</p>
</body>
</html>

输出结果:

技术图片

????分组与嵌套:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组与嵌套</title>
<style>
div {color: red;}
p {color: red;}
span {color: red;}
/*分组*/
div,p,span {color: blue;}
/*嵌套:不同的选择器可以共用一个样式*/
/*后代选择器与标签组合使用*/
div p,span {color:red;}
</style>
</head>
<body>
<div>这是div标签,蓝色</div>
<p>这是p标签,蓝色</p>
<span>这是span标签,蓝色</span>
</body>
</html>

结果:

技术图片

可以判断当标签选择器、分组、后代选择器和标签选择器组合使用时——标签选择器优先级最高

????伪装选择器

  1. 未访问的连接

    a:link

  2. 已访问的连接

    a:visited

  3. 鼠标移动到连接

    a:hover

  4. 选定的连接

    a:acitve

  5. Input输入框获取焦点时样式

    Input:focus {

    ????????outline:none;

    ????????background-color:#eee

    }

    ?

????针对首字母设置特殊样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
p:first-letter{font-size: 48px;color: red;}
</style>
</head>
<body>
<p>测试字体大小和颜色</p>
</body>
</html>

技术图片

????在每个<p>元素之前插入内容before

<style>
p:before{content: "*";color: red;}
</style>

????在每个<p>元素之后插入内容after

<style>
p:after{content: "*";color: red;}
</style>

?

????????元素的权重:

  1. 内联样式权重为1000
  2. Id选择器的权重为100
  3. 类选择器的权重为10
  4. 元素选择器的权重为1

?

设置宽和高:

????宽度:width

????高度:height

关于字体设置:

  1. 字体类型font-family
  2. 字体大小font-size
  3. 字体粗细(可以字体粗细大小值)
    1. normal默认值
    2. bold粗体
    3. bolder更粗
    4. loghter更细
    5. inerit继承父类字体粗细值

?

文本对齐:

  1. 左对齐:left
  2. 右对齐:right
  3. 居中对齐:center
  4. 两端对齐:justify

对文字装饰:

????通过text-decoration属性来实现特殊效果

????????None????????默认,标准的文本不加任何特殊效果

????????Underline????文本下一条直线

????????Overline????????文本上一条直线

????????Linherit????????继承父类text-decoration属性

?

????????首行缩进:

????????????Text-index: 像素值

????????设置背景颜色

  1. 定义一个空的标签
  2. 针对这个空标签设置属性

    ?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>设置背景颜色</title>
    <style>
    div {
    width: 400px;
    height: 200px;
    background-color: green;
    /*background: no-repeat url("http://pic37.nipic.com/20140110/17563091_221827492154_2.jpg");*/}
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

技术图片

参数介绍:

????????repeat:背景图片平铺满整个页面

????????repeat-x:背景图片在横向方向平铺

????????repeat-y:背景图片在垂直方向平铺

????????no-repeat:不平铺

????

?

????设置边框:

????????border-width????边框像素

????????border-style????边框样式(none:默认无边框,dotten:点状虚线边框,dashed:举行虚线边框,solid:实线边框)

????????border-color????边框颜色


				<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
border: 3px solid black;
border-radius: 50%;}
</style>
</head>
<body>
<div></div>
</body>
</html>

?

技术图片

????

以上是关于Css-1的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数