python学习笔记-Day17 (上节知识点补充)

标签：display   python   cursor   知识点   black   伪类   

自定义三角符号

<style>
    .arrow{
        display: inline-block;

                border-top: 10px solid;
        border-right: 10px solid;
        border-bottom: 10px solid;
        border-left: 10px solid;

        /*border-top: transparent;   设置颜色为透明色, transparent为透明色*/
        border-top-color: transparent;
        border-right-color: black;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
</style>

<div class="arrow"></div>

鼠标样式

测试代码：

<p>Mouse over the words to change the cursor.</p>
<div style="width: 160px;cursor:auto">auto</div><br>
<div style="width: 160px;cursor:crosshair">crosshair</div><br>
<div style="width: 160px;cursor:default">default</div><br>
<div style="width: 160px;cursor:e-resize">e-resize</div><br>
<div style="width: 160px;cursor:help">help</div><br>
<div style="width: 160px;cursor:move">move</div><br>
<div style="width: 160px;cursor:n-resize">n-resize</div><br>
<div style="width: 160px;cursor:ne-resize">ne-resize</div><br>
<div style="width: 160px;cursor:nw-resize">nw-resize</div><br>
<div style="width: 160px;cursor:pointer">pointer</div><br>
<div style="width: 160px;cursor:progress">progress</div><br>
<div style="width: 160px;cursor:s-resize">s-resize</div><br>
<div style="width: 160px;cursor:se-resize">se-resize</div><br>
<div style="width: 160px;cursor:sw-resize">sw-resize</div><br>
<div style="width: 160px;cursor:text">text</div><br>
<div style="width: 160px;cursor:w-resize">w-resize</div><br>
<div style="width: 160px; cursor:wait">wait</div><br>

a标签去掉下划线

在css样式中使用如下参数：

text-decoration:none;

<a href="#" style=" text-decoration: none"   >取消下划线</a>

圆角设置参数

border-radius可以同时设置1到4个值。（想想我们之前的margin与padding）如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius:50px;

border-radius:50px 25px; //表示左上角和右下角使用第一个值，右上角和左下角使用第二个值

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

border-top-left-radius: 50px 100px;//第一个值表示水平半径，第二个值表示垂直半径。

伪类和伪元素

css的元素选择器除了除了id选择器、类选择器、属性选择器等以外，还有一种很重要的一类：根据元素的状态来选择元素，即 伪类 和伪元素。

伪类用于向某些选择器添加特殊的效果。

伪元素用于将特殊的效果添加到某些选择器。

示例代码

<style type="text/css">
    a:link {color: red}
    a:visited {color: green}
    a:hover {color: darkviolet}
    a:active {color: limegreen}
</style>

<a href="#">伪类</a>

伪类

以hover为例

<style>
    ul li:first-child{
        background-color: red;
    }
</style>
<ul>
    <li>001</li>
    <li>002</li>
</ul>

代码对比

<style>
    .bgcolor{
        background-color: red;
    }
</style>
<ul>
    <li class="bgcolor">001</li>
    <li>002</li>
</ul>

伪元素

以first-letter为例

<style>
    p:first-letter {
        color: red
    }
</style>
<p>I like python.</p>

代码对比

.first-letter {color: red}
<p>
    <span class=‘first-letter‘>I</span> like python.
</p>

伪类与伪元素的区别

两者都属于css选择器,根据上面的代码,我们可以发现,在伪元素的两段代码对比后 下面的代码比上面的代码多了一个 span元素,而伪类的对比代码里 并没有新元素的出现. 所以两者的根本区别是:他们是否创建了新的元素,如果需要添加新元素的那就是伪元素, 在现有的元素上添加类别的是伪类.

在css3中两者的区别更加明显, 

伪类用一个冒号表示 :hover

伪元素则使用两个冒号表示  ::after

本文出自 “Will的笔记” 博客，请务必保留此出处http://timesnotes.blog.51cto.com/1079212/1748563

python学习笔记-Day17 (上节知识点补充)

标签：display   python   cursor   知识点   black   伪类   

原文地址：http://timesnotes.blog.51cto.com/1079212/1748563