CSS（Cascading Style Sheet）

最新推荐文章于 2021-10-17 11:02:44 发布

鑫～仔

最新推荐文章于 2021-10-17 11:02:44 发布

阅读量314

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_44800244/article/details/95731452

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

文章目录

CSS（Cascading Style Sheet）

层叠样式表，控制HTML的布局和样式

使用方式

三种使用方式

* 内联样式：在标签内使用属性stype
* 页内样式：在 <head> 标签中使用 <style type="text/css"></style>
* 外部样式：使用CSS文件，使用 <link rel="stylesheet" type="text/css" href="mystyle.css">
优先级从高到低

基本语法

selector {property1: value1, …, propertyN:valueN}
例如 a {color:red; text-decoration:line-through} ，将链接标签文字颜色变成红色且有横线穿过

颜色写法

p { color: #ff0000; } /*大小写无所谓*/
p { color: #f00; } /*FF0000的缩写*/
p { color: rgb(255,0,0); } /*三原色表示，0~255*/

选择器***

标签选择器

body {text-align: center}

上例直接使用HTML标签的选择器，就是标签选择器，元素选择器

注意，如果将标签改为*，表示统配所有HTML标签

id选择器

id指的是HTML标签内的属性id

例如 <div id="menu"> 

#menu {
    background-color: rgb(255, 255, 255);
    width: 100%;
    border-bottom: #f0f0f0 solid 1px;
    margin: 0px 0px 5px 0px;
}

类选择器

类，指的是标签中的class属性

例如 <div class='main center'>

.center {
    width: 80%;
    margin: auto; 
}

选择器分组

分组的选择就可以使用同样的样式声明

h1,h2,h3,h4,h5,h6 {
    color: green;
}

层次选择器

后代选择器

div li {
    display: inline; 
}

所有div标签下任意层下的li标签

div#menu li {
    display: inline; 
}

子选择器

ul > li {
    display: inline; 
}

所有div标签下直接的子元素li标签

div#menu ul > li {
    display: inline; 
}

相邻兄弟选择器

div.detail p + p {
    color: green; 
}

class为detail的div标签下任意层下的近邻p标签的下一个p标签, p 的兄弟都变色, p不变色
思考：如果加上 li + li，会出现什么现象？
和 p + p 效果相同

伪类 pseudo-classes

伪类能增加样式，类似于class

锚伪类，链接标签a的四种状态

a:link {color: red} /* 未访问的链接 */

a:visited {color: green} /* 已访问的链接 */

a:hover {color: blue} /* 鼠标移动到链接上 */

a:active {color: black} /* 选定的链接 */

伪类可以和css类配合使用

a.red:visited {color: #FF0000} 
a:hover {
    color: red; 
}
a {
    color: chartreuse;
    text-decoration-line: none; 
}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

注意，伪类和前面部分中间不要有空格

伪元素pseudo-element

伪元素能增加元素
:before 和 :after 可以在元素前后插入内容

#homepage:after {
    content:url(http://www.baidu.com/kczx/images/why1.png);
}
a:before {
            content:"这是链接~~~"; 
}

属性选择器

E [ attr ] { sRules } 具有某属性 

E [ attr = value ] { sRules } 具有某属性且等于value 

E [ attr ~= value ] { sRules } 具有某属性且属性值中的一个是value 

E [ attr |= value ] { sRules } 具有某属性且属性值使用了-，且-之前的部分是value的才匹配*[class|="main"] 能和 <div class='main-center'> 减号之前的部分匹配

链接具有href属性
a[href] {
    color: blue; 
    text-decoration:line-through
}

图片alt属性为baidu_logo
img[alt=baidu_logo] {
    height: 20px; 
}


*[class="main center"] {
    color:black
}

*[class~="center"] {
    color:black
} // ~= 可以匹配main和center中任意一个, main和center用空格分开, 否则只能写[class="main center"]才能匹配, 

*[class|="center"] {
    color:black
} //main-center  匹配-前面的main

继承

body {
    text-align: center;
    color:red; 
}

.center{
        width:80%;
        margin: auto;
        color: rgb(3, 2, 2);
    }

观察整个页面文字颜色，几乎都变成了红色

页面中父元素中使用的样式，通过CSS继承，子孙元素将继承并使用祖先元素的属性，除非子元素重新定义了该属性

常见样式

背景 background复合属性 http://www.w3school.com.cn/css/css_background.asp

字体 font复合属性 http://www.w3school.com.cn/css/css_font.asp

表格border

table
{
    border-collapse:collapse; 
}

table,td
{
    border: 1px solid black; 
}

margin外边距和padding内边距

margin: top right bottom left  
padding: top right bottom left

padding:10px 5px 15px 20px; /*顺时针上右下左*/

padding:10px 5px 15px; /*上10px、左右5px、下15px*/

padding:10px 5px; /*上下10px、左右5px*/

padding:10px /*4方向全是10px*/

margin:auto /*浏览器计算外边距*/

内外边距都是顺时针设置4个方向，也可以单独设置

鑫～仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（Cascading Style Sheet）

文章目录CSS（Cascading Style Sheet）使用方式基本语法颜色写法选择器***标签选择器id选择器类选择器选择器分组层次选择器伪类 pseudo-classes伪元素pseudo-element属性选择器继承常见样式CSS（Cascading Style Sheet）层叠样式表，控制HTML的布局和样式使用方式三种使用方式* 内联样式：在标签内使用属性stype* 页...
复制链接

扫一扫