CSS学习笔记

最新推荐文章于 2022-03-11 11:42:24 发布

duoduowangjia

最新推荐文章于 2022-03-11 11:42:24 发布

阅读量293

点赞数

分类专栏：跟兄弟连学php学习笔记文章标签： php css http html

本文链接：https://blog.csdn.net/duoduowangjia/article/details/109665397

版权

跟兄弟连学php学习笔记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

CSS（层叠样式表单）

概念：样式表是文档的表现，层叠样式表是把一组样式在一起层叠使用，控制某一个或多个HTML元素。

特点：

1.控制页面中的每一个元素

2.对HTML语言处理样式的最好补充

3.把内容和格式处理相分离，减少工作量

用镶嵌CSS控制<p>标记的显示效果

<html>
    <head>
        <title>css示例</title>
        <style>
            p{
                front-size:30px;
                color:yellow;
                border:2px solid blue;
                text-align:center;
                background:green;
            }
        </style>
    </head>
    
    <body>
        <p>linux</p>
        <p>apache</p>
        <p>mysql</p>
        <p>php</p>
    </body>
</html>

定义元素的颜色及字体大小属性

<head>
    <title>CSS示例</title>
    <style type="text/css"
        h1 { front_size:x-large; color:red} /*所有一级标题加大红色*/
        h2 { front_size:large; color:blue}
    </style>
</head>

直接在HTML元素中使用style属性声明样式

<h1 style="fron-size;x-large;color:red">

CSS注释

例子 /* 注释内容*/

长度单位

单位	解释
em(front_size:2em)	大致与一个字符高度相同
px(front_size:12px)	表示像素的单位
pt(front_size:12pt)	一磅
%（front_size:80%)	百分比
pc,cm,mm,in	活字，厘米，毫米，英寸

颜色单位和URL值

颜色位置：color,background-color,border-color

颜色值是一个关键字（aquq,black,blue等）或一个RGB格式数字

RGB颜色四种形式


#rrggbb(如#00cc00)	#rgb(如#0c0)	rgb(x,x,x) x=0~225	rgb(y%,y%,y%)

指定背景图片

url(addr)

body { background:url(https://www.baidu.com)}

在HTML文档中放置CSS的几种方式

名字	用法
内联样式表	<p style="color:red;front_family:serif">
嵌入一张样式表	<head>
连接到一张外部样式表

内联样式表 :<p style="color:red;front_family:serif">

嵌入一张样式表

<head>
    <style type="text/css" media="screen">
        body { background: url(foo.gif) red;color:black }
        p em { background: yellow;color:black }
        .note{ margin-left: 5em; margin-right: 5em}
    </style>
</head>

连接到一张外部样式表

CSS选择器

赋予内部或外部样式表的名字

HTML选择器

p { text-indent: 3em}
h1 { color:red }

类选择器

p.dark-row { background-color:#EAEAEA;}
p.light-row { background-color:#F8F8F8;}
/* 定义类的背景颜色*/

/* 引用 */
<p class="dark-row">第一段</p>

/*用于多个元素的类*/
.note { front-size:small}

/*同时使用多个类选择器*/
<p class="one two three">第一段</p>

ID选择器

#main { text-indent:3em } /*ID名称前需要加称号*/

/* 使用id属性匹配id="main"的段落元素<p> */
<p id="main">文本缩进 3em</p>

关联选择器

table a { color:red} /表格table内连接a改变了样式/

组合选择器

h1,h2,h3,h4,h5,h6 { color:red;fron-family:sans-serif}/组合选择器修饰标题/

伪元素选择器

HTML 标签:伪元素{属性:值;}

a:link {color:red;}/*超连接没有动作前的状态*/
a:hover{color:yellow; front-size:125%; }/*光标移动到超连接上的状态*/
a:active {color:blue; front-size:125%; }/*选中超连接的状态*/
a:visited { color:green; front-size:85%; }/*访问过的超连接状态*/

CSS常见的样式属性和值

字体属性

属性	描述	属性值
font-family	字体族科	使用Times,serif等任意字体族科，使用多个族科赋值
font-size	字体大小	使用绝对，相对大小，长度，百分比等
font-style	字体风格	normal普通,italic斜体,oblique倾斜
font-weight	字体加粗	normal,bold,bolder,lighter
font-varignt	字体变形	normal,small-caps

p{
    font-family:Times,serif;
    font-size:12pt;
    font-style:italic;
    font-weight:bold;
}

font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[/<行高>]?<字体族科>

p { font:italic bold 12pt/14pt Times,serif} /*所有字体属性一行解决*/

颜色属性

h1 { color:blue; }
h2 { color:#000080;}
h3 { color:#0c0}

背景属性

属性	描述	属性值
background-color	背景颜色	与color值相同，透明为transparent
backgrounp-image	背景图像	图片URL或none
background-repeat	背景重复	repeat,repeat-x,repeat-y,no-repeat
background-attachment	背景附件	scroll(滚动）或fixed（固定）
background-position	背景位置	横向关键字（left,center,right)纵向关键字（top,center,botton),百分比长度

background: <背景颜色>||<背景图案>||<背景重复>||<背景附件>||<背景位置>

body { background:white url(https://www.baidu.com/a.gif);}
h1 { background:#7FFFD4;}
p { background:url(../images/pawn.png) #F0F8FF fixed;}
table { background:#0c0 url(leaves,jpg) no-repeat bottom right;}

文本属性

属性	描述	属性值
letter-spacing	字母间隔	必须符合长度格式
word-spacing	文字间隔	必须符合长度格式
text-decoration	文字修饰	uderline(下画线)，overline(上画线)，line-through(删除线)，blink(闪烁),默认为无
text-align	横向排列	left,right,center,justify
text-indent	文本缩进	必须是一个长度或百分比
line-height	行高	可以接受控制文本基线间隔的值，为数字则为元素乘以该值。百分比值相对于元素字体大小而定，不允许使用负值。

边框属性

边框风格属性

h1 { border-style:solid;}/*设置段落四个边框为直线式边框*/
p { border-style:solid double;}/*设置段落上下边框为直线式，左右边框为双线式*/

边框宽度属性

P{
    horder-style:solid:/*设置段落元素的四个边框为直线式边框*/
    horder-left-width:15px;。*设置段落的左边宽度为15像素*/
}
/* border-top-eidth,border-bottom-width,border-left-width,border-right-width*/

边框颜色属性

p {
    border-style:solid;/*设置段落元素的4个边框都为直线式边框*/
    
    border-color:#FF0000 #0000FF;/*设置段落的上下边框为红色，左右边框为蓝色*/
}

略写边框属性

p {border:5px solid gray;}

border-width,border-style,border-color三属性

鼠标光标属性

p { cursor:pointer;}

列表属性

属性	描述
list-style-type	设定引导列表项的符号类型如：disc,circle,square
list-style-image	使用图像作为定制列表符号
list-style-position	决定列表项目缩进的程序

ul {

list-style-type:none;/类型/

margin:0px/外边界/

padding:0px;/内边界/

}

自定义符号

li{
    padding-left:30px;
    background:url(images/tp.gif) no-repeat 0 center;
}

综合实例

输出一个分类栏目

<html>
    <head>
        <title>css定义栏目区块</title>
        <link rel="Stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="wrapper">
            <div class="tit">
                <h3><a href="">栏目标题</a></h3>
            </div>
            <div class="list">
                <ul>
                    <li><a href="">第一列表选项</a></li>
                    <li><a href="">第二列表选项</a></li>
                    <li><a href="">第三列表选项</a></li>
                    <li><a href="">第四列表选项</a></li>
                    <li><a href="">第五列表选项</a></li>
                    <li><a href="">第六列表选项</a></li>
                    <li><a href="">第七列表选项</a></li>
                    <li><a href="">第八列表选项</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

/*HTMl选择器为HTML的body元素添加样式*/
body{
    background:white;
    font:12px Arial,宋体；
}
/*组合选择器和伪元素选择器设置超连接样式*/
a:link,a:visited{
    text-decoration:none;
    color:#888;
}
/*ID选择器，定义整个栏目容器*/
#wrapper{
    width: 300px;
    text-align:left;
}
/*class选择器，定义栏目容器中的标题区块的类选择器*/
.tit{
    width:100%;
    height:24px;
    background:url(titbg.gif);
}
/*关联选择器，设置栏目标题区块中的h3标题*/
.tit h3 {
    margin:0px;
    padding:0px;
    line-height:24px;
    font-size:12px;
    text-indent:30px;
    background:url(tittb.gif) no-repeat 3% 50%;
}
/*class选择器，定义栏目容器中的内容列表区块的类选择器*/
.list{
    width:298px limportant;
    width:300px;
    float:left;
    border:1px solid #D8D8D8;
    border-top:0px;
}
/*HTML选择器，为HTML列表元素ul设置样式
ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
/*关联选择器，为HTML列表项元素li设置样式*/
ul li {
    float:left;
    line-hetght:20px;
    width:45%;
    margin:0px 5px;
    background: url(sidebottom.gif) repeat -x 0 bottom);
}
/*关联选择器，为列表中的元素中的超链接定义样式*/
ul a {
    padding-left:12px;
    background:url(bullet.gif) no-repeat 0 50%;
}
/*设置网页超连接被访问时的样式*/
ul a:hover{
    text-decoration:underline;
    color:#ff0000;
}

duoduowangjia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

CSS（层叠样式表单）概念：样式表是文档的表现，层叠样式表是把一组样式在一起层叠使用，控制某一个或多个HTML元素。特点：1.控制页面中的每一个元素2.对HTML语言处理样式的最好补充3.把内容和格式处理相分离，减少工作量用镶嵌CSS控制<p>标记的显示效果<html> <head> <title>css示例</title> <style> p
复制链接

扫一扫